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

}

}

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