استایل زیبا با scss برای هاور - Stuing Hover Effects (نمونه 9) : افکت مرغ مگس خوار

@import url(http://fonts.googleapis.com/css?family=Martel+Sans:200,300,400,800,900);

*,

*:before,

*:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

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

background-color: #000;

}

section {

height: 350px;

width: 94%;

box-shadow: 0px 0px 146px 21px rgba(0, 0, 0, 0.75);

background-color: #000;

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

position: relative;

overflow: hidden;

width: 100%;

margin: 0 auto 0px;

}

section a {

text-transform: uppercase;

text-align: center;

text-decoration: none;

font-size: 4.875em;

font-weight: 900;

color: #fff;

}

section a:after, section a:before {

content: '';

}

section.p18 {

background-image: url("9.jpg");

}

section.p18 a {

text-align: left;

width: 491px;

height: 94px;

line-height: 94px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -245.5px;

margin-top: -47px;

font-size: 3.87500em;

}

section.p18 a:before, section.p18 a:after {

content: '';

position: absolute;

background-color: rgba(255, 255, 255, 0.8);

width: 46px;

height: 65px;

left: -46px;

top: -12%;

}

section.p18 a:before {

-webkit-clip-path: polygon(0 35%, 100% 43%, 100% 100%);

clip-path: polygon(0 35%, 100% 43%, 100% 100%);

}

section.p18 a:after {

-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);

clip-path: polygon(13% 0, 100% 43%, 100% 100%);

}

section.p18 a:hover:before {

-webkit-animation: voavoa 0.1s infinite linear;

-moz-animation: voavoa 0.1s infinite linear;

animation: voavoa 0.1s infinite linear;

}

section.p18 a:hover:after {

-webkit-animation: voavoa2 0.1s infinite linear;

-moz-animation: voavoa2 0.1s infinite linear;

animation: voavoa2 0.1s infinite linear;

}

@-webkit-keyframes voavoa {

from {

-webkit-clip-path: polygon(0 35%, 100% 43%, 100% 100%);

clip-path: polygon(0 35%, 100% 43%, 100% 100%);

}

to {

-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);

clip-path: polygon(13% 0, 100% 43%, 100% 100%);

}

}

@-moz-keyframes voavoa {

from {

-webkit-clip-path: polygon(0 35%, 100% 43%, 100% 100%);

clip-path: polygon(0 35%, 100% 43%, 100% 100%);

}

to {

-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);

clip-path: polygon(13% 0, 100% 43%, 100% 100%);

}

}

@keyframes voavoa {

from {

-webkit-clip-path: polygon(0 35%, 100% 43%, 100% 100%);

clip-path: polygon(0 35%, 100% 43%, 100% 100%);

}

to {

-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);

clip-path: polygon(13% 0, 100% 43%, 100% 100%);

}

}

@-webkit-keyframes voavoa2 {

from {

-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);

clip-path: polygon(13% 0, 100% 43%, 100% 100%);

}

to {

-webkit-clip-path: polygon(0 45%, 100% 43%, 100% 100%);

clip-path: polygon(0 45%, 100% 43%, 100% 100%);

}

}

@-moz-keyframes voavoa2 {

from {

-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);

clip-path: polygon(13% 0, 100% 43%, 100% 100%);

}

to {

-webkit-clip-path: polygon(0 45%, 100% 43%, 100% 100%);

clip-path: polygon(0 45%, 100% 43%, 100% 100%);

}

}

@keyframes voavoa2 {

from {

-webkit-clip-path: polygon(13% 0, 100% 43%, 100% 100%);

clip-path: polygon(13% 0, 100% 43%, 100% 100%);

}

to {

-webkit-clip-path: polygon(0 45%, 100% 43%, 100% 100%);

clip-path: polygon(0 45%, 100% 43%, 100% 100%);

}

}