استایل زیبا با less برای هاور - Stylish hover effects (نمونه 10) : افکت ضربان موسیقی

*,

*: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.p9 {

  background-image: url(10.jpg);

}

section.p9 a {

  width: 211px;

  height: 55px;

  line-height: 55px;

  position: absolute;

  top: 50%;

  left: 50%;

  margin-left: -105.5px;

  margin-top: -27.5px;

  -webkit-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);

  -moz-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);

  -ms-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);

  -o-transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);

  transition: all 0.5s cubic-bezier(0, 0.28, 0, 1);

}

section.p9 a:before,

section.p9 a:after,

section.p9 a div {

  content: '';

  height: 9px;

  background-color: #fff;

  position: absolute;

  right: 80%;

  width: 0;

}

section.p9 a:before {

  top: 0;

}

section.p9 a > div:first-of-type {

  top: 15px;

}

section.p9 a > div:last-of-type {

  top: 31px;

}

section.p9 a:after {

  top: 46px;

}

section.p9 a:hover {

  padding-left: 40px;

}

section.p9 a:hover:before {

  -webkit-animation: bar1 0.8s infinite;

  -moz-animation: bar1 0.8s infinite;

  -ms-animation: bar1 0.8s infinite;

  animation: bar1 0.8s infinite;

}

@-moz-keyframes bar1 {

  0% {

    width: 10px;

  }

  5% {

    width: 5px;

  }

  16% {

    width: 25px;

  }

  32% {

    width: 18px;

  }

  50% {

    width: 28px;

  }

  66% {

    width: 50px;

  }

  73% {

    width: 45px;

  }

  100% {

    width: 10px;

  }

}

@-webkit-keyframes bar1 {

  0% {

    width: 10px;

  }

  5% {

    width: 5px;

  }

  16% {

    width: 25px;

  }

  32% {

    width: 18px;

  }

  50% {

    width: 28px;

  }

  66% {

    width: 50px;

  }

  73% {

    width: 45px;

  }

  100% {

    width: 10px;

  }

}

@keyframes bar1 {

  0% {

    width: 10px;

  }

  5% {

    width: 5px;

  }

  16% {

    width: 25px;

  }

  32% {

    width: 18px;

  }

  50% {

    width: 28px;

  }

  66% {

    width: 50px;

  }

  73% {

    width: 45px;

  }

  100% {

    width: 10px;

  }

}

section.p9 a:hover > div:last-of-type {

  -webkit-animation: bar2 0.8s infinite;

  -moz-animation: bar2 0.8s infinite;

  -ms-animation: bar2 0.8s infinite;

  animation: bar2 0.8s infinite;

}

@-moz-keyframes bar2 {

  0% {

    width: 50px;

  }

  5% {

    width: 15px;

  }

  16% {

    width: 55px;

  }

  32% {

    width: 18px;

  }

  50% {

    width: 38px;

  }

  66% {

    width: 50px;

  }

  73% {

    width: 14px;

  }

  100% {

    width: 50px;

  }

}

@-webkit-keyframes bar2 {

  0% {

    width: 50px;

  }

  5% {

    width: 15px;

  }

  16% {

    width: 55px;

  }

  32% {

    width: 18px;

  }

  50% {

    width: 38px;

  }

  66% {

    width: 50px;

  }

  73% {

    width: 14px;

  }

  100% {

    width: 50px;

  }

}

@keyframes bar2 {

  0% {

    width: 50px;

  }

  5% {

    width: 15px;

  }

  16% {

    width: 55px;

  }

  32% {

    width: 18px;

  }

  50% {

    width: 38px;

  }

  66% {

    width: 50px;

  }

  73% {

    width: 14px;

  }

  100% {

    width: 50px;

  }

}

section.p9 a:hover > div:first-of-type {

  -webkit-animation: bar3 0.8s infinite;

  -moz-animation: bar3 0.8s infinite;

  -ms-animation: bar3 0.8s infinite;

  animation: bar3 0.8s infinite;

}

@-moz-keyframes bar3 {

  0% {

    width: 0;

  }

  5% {

    width: 35px;

  }

  16% {

    width: 15px;

  }

  32% {

    width: 25px;

  }

  50% {

    width: 5px;

  }

  66% {

    width: 20px;

  }

  73% {

    width: 10px;

  }

  100% {

    width: 30px;

  }

}

@-webkit-keyframes bar3 {

  0% {

    width: 0;

  }

  5% {

    width: 35px;

  }

  16% {

    width: 15px;

  }

  32% {

    width: 25px;

  }

  50% {

    width: 5px;

  }

  66% {

    width: 20px;

  }

  73% {

    width: 10px;

  }

  100% {

    width: 30px;

  }

}

@keyframes bar3 {

  0% {

    width: 0;

  }

  5% {

    width: 35px;

  }

  16% {

    width: 15px;

  }

  32% {

    width: 25px;

  }

  50% {

    width: 5px;

  }

  66% {

    width: 20px;

  }

  73% {

    width: 10px;

  }

  100% {

    width: 30px;

  }

}

section.p9 a:hover:after {

  -webkit-animation: bar4 0.8s infinite;

  -moz-animation: bar4 0.8s infinite;

  -ms-animation: bar4 0.8s infinite;

  animation: bar4 0.8s infinite;

}

@-moz-keyframes bar4 {

  0% {

    width: 10px;

  }

  5% {

    width: 5px;

  }

  16% {

    width: 15px;

  }

  32% {

    width: 25px;

  }

  50% {

    width: 20px;

  }

  66% {

    width: 30px;

  }

  73% {

    width: 20px;

  }

  100% {

    width: 10px;

  }

}

@-webkit-keyframes bar4 {

  0% {

    width: 10px;

  }

  5% {

    width: 5px;

  }

  16% {

    width: 15px;

  }

  32% {

    width: 25px;

  }

  50% {

    width: 20px;

  }

  66% {

    width: 30px;

  }

  73% {

    width: 20px;

  }

  100% {

    width: 10px;

  }

}

@keyframes bar4 {

  0% {

    width: 10px;

  }

  5% {

    width: 5px;

  }

  16% {

    width: 15px;

  }

  32% {

    width: 25px;

  }

  50% {

    width: 20px;

  }

  66% {

    width: 30px;

  }

  73% {

    width: 20px;

  }

  100% {

    width: 10px;

  }

}