استایل زیبا با 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%);

  }

}