استایل زیبا با less برای هاور - Stylish hover effects (نمونه 6) : ستاره دنباله دار

*,

*:before,

*:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

section {

font-family: 'Open Sans', sans-serif;

height: 350px;

position: relative;

background-clip: fixed;

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

overflow: hidden;

width: 94%;

margin: 0 auto 30px;

}

section a {

text-transform: uppercase;

font-weight: 800;

text-align: center;

text-decoration: none;

color: #fff;

display: block;

font-size: 4.875em;

}

section.p5 {

background-image: url(6.jpg);

}

section.p5 a {

width: 370px;

height: 94px;

line-height: 94px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -185px;

margin-top: -47px;

}

section.p5 a:after {

content: '';

width: 5px;

height: 212px;

background-color: #fff;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

-webkit-transform: rotate(45deg) translate(0%, 0%);

-moz-transform: rotate(45deg) translate(0%, 0%);

-ms-transform: rotate(45deg) translate(0%, 0%);

-o-transform: rotate(45deg) translate(0%, 0%);

transform: rotate(45deg) translate(0%, 0%);

-webkit-transform-origin: 100% 50%;

-moz-transform-origin: 100% 50%;

-ms-transform-origin: 100% 50%;

-o-transform-origin: 100% 50%;

transform-origin: 100% 50%;

position: absolute;

top: 50%;

left: 50%;

margin-left: -2.5px;

margin-top: -106px;

opacity: 0;

-webkit-opacity: 0;

-moz-opacity: 0;

}

section.p5 a:hover:after {

-webkit-animation: comets 0.5s forwards;

-moz-animation: comets 0.5s forwards;

-ms-animation: comets 0.5s forwards;

animation: comets 0.5s forwards;

}

@-moz-keyframes comets {

0% {

width: 0;

opacity: 0;

-webkit-opacity: 0;

-moz-opacity: 0;

-webkit-transform: rotate(45deg) translate(-20%, -100%);

-moz-transform: rotate(45deg) translate(-20%, -100%);

-ms-transform: rotate(45deg) translate(-20%, -100%);

-o-transform: rotate(45deg) translate(-20%, -100%);

transform: rotate(45deg) translate(-20%, -100%);

}

50% {

width: 2px;

opacity: 1;

-webkit-opacity: 1;

-moz-opacity: 1;

}

100% {

width: 0%;

opacity: 0;

-webkit-opacity: 0;

-moz-opacity: 0;

-webkit-transform: rotate(45deg) translate(20%, 100%);

-moz-transform: rotate(45deg) translate(20%, 100%);

-ms-transform: rotate(45deg) translate(20%, 100%);

-o-transform: rotate(45deg) translate(20%, 100%);

transform: rotate(45deg) translate(20%, 100%);

}

}

@-webkit-keyframes comets {

0% {

width: 0;

opacity: 0;

-webkit-opacity: 0;

-moz-opacity: 0;

-webkit-transform: rotate(45deg) translate(-20%, -100%);

-moz-transform: rotate(45deg) translate(-20%, -100%);

-ms-transform: rotate(45deg) translate(-20%, -100%);

-o-transform: rotate(45deg) translate(-20%, -100%);

transform: rotate(45deg) translate(-20%, -100%);

}

50% {

width: 2px;

opacity: 1;

-webkit-opacity: 1;

-moz-opacity: 1;

}

100% {

width: 0%;

opacity: 0;

-webkit-opacity: 0;

-moz-opacity: 0;

-webkit-transform: rotate(45deg) translate(20%, 100%);

-moz-transform: rotate(45deg) translate(20%, 100%);

-ms-transform: rotate(45deg) translate(20%, 100%);

-o-transform: rotate(45deg) translate(20%, 100%);

transform: rotate(45deg) translate(20%, 100%);

}

}

@keyframes comets {

0% {

width: 0;

opacity: 0;

-webkit-opacity: 0;

-moz-opacity: 0;

-webkit-transform: rotate(45deg) translate(-20%, -100%);

-moz-transform: rotate(45deg) translate(-20%, -100%);

-ms-transform: rotate(45deg) translate(-20%, -100%);

-o-transform: rotate(45deg) translate(-20%, -100%);

transform: rotate(45deg) translate(-20%, -100%);

}

50% {

width: 2px;

opacity: 1;

-webkit-opacity: 1;

-moz-opacity: 1;

}

100% {

width: 0%;

opacity: 0;

-webkit-opacity: 0;

-moz-opacity: 0;

-webkit-transform: rotate(45deg) translate(20%, 100%);

-moz-transform: rotate(45deg) translate(20%, 100%);

-ms-transform: rotate(45deg) translate(20%, 100%);

-o-transform: rotate(45deg) translate(20%, 100%);

transform: rotate(45deg) translate(20%, 100%);

}

}

سون لرن • آموزش...