|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>animate button</title> |
|
</head> |
|
<style> |
|
/* |
|
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction; |
|
*/ |
|
@keyframes wave-dissolve { |
|
from { |
|
width: 70px; |
|
height: 70px; |
|
left: 27px; |
|
top: 27px; |
|
opacity: 1; |
|
} |
|
90% { |
|
width: 120px; |
|
height: 120px; |
|
left: 2px; |
|
top: 2px; |
|
opacity: 0; |
|
} |
|
to { |
|
opacity: 0; |
|
} |
|
} |
|
@keyframes wave-return { |
|
from { |
|
width: 64px; |
|
height: 64px; |
|
left: 32px; |
|
top: 32px; |
|
} |
|
to { |
|
width: 80px; |
|
height: 80px; |
|
left: 24px; |
|
top: 24px; |
|
} |
|
} |
|
.wave-button{ |
|
position: absolute; |
|
left: 100px; |
|
top: 100px; |
|
} |
|
.wave-dissolve{ |
|
position: absolute; |
|
left: 30px; |
|
top: 30px; |
|
width: 64px; |
|
height: 64px; |
|
border: 2px solid rgba(0, 163, 255, 0.5); |
|
border-radius: 100%; |
|
-webkit-animation: wave-dissolve 1.5s linear 0s infinite normal; |
|
-o-animation: wave-dissolve 1.5s linear 0s infinite normal; |
|
animation: wave-dissolve 1.5s linear 0s infinite normal; |
|
|
|
} |
|
.wave-return{ |
|
position: absolute; |
|
left: 32px; |
|
top: 32px; |
|
background-color: rgba(0, 163, 255, 0.3); |
|
width: 64px; |
|
height: 64px; |
|
border-radius: 100%; |
|
-webkit-animation: wave-return 0.5s linear 0s infinite alternate; |
|
-o-animation: wave-return 0.5s linear 0s infinite alternate; |
|
animation: wave-return 0.5s linear 0s infinite alternate; |
|
} |
|
.wave-content{ |
|
position: absolute; |
|
left: 32px; |
|
top: 32px; |
|
background-color: #00a3e1; |
|
width: 64px; |
|
height: 64px; |
|
border-radius: 100%; |
|
|
|
perspective: 1200; |
|
} |
|
.wave-content:hover .wave-flip { |
|
-webkit-transform: rotateY(180deg); |
|
-moz-transform: rotateY(180deg); |
|
-ms-transform: rotateY(180deg); |
|
} |
|
.wave-flip{ |
|
display: block; |
|
color: #fff; |
|
|
|
-webkit-transform-style: preserve-3d; |
|
-moz-transform-style: preserve-3d; |
|
-ms-transform-style: preserve-3d; |
|
|
|
-webkit-transition: .7s linear; |
|
-moz-transition: .7s linear; |
|
-ms-transition: .7s linear; |
|
|
|
} |
|
.wave-front, .wave-back{ |
|
position: absolute; |
|
top: 20px; |
|
width: 64px; |
|
|
|
-webkit-backface-visibility: hidden; |
|
-moz-backface-visibility: hidden; |
|
-ms-backface-visibility: hidden; |
|
} |
|
.wave-front{ |
|
text-align: center; |
|
|
|
-webkit-transform: rotateY(0deg); |
|
-moz-transform: rotateY(0deg); |
|
-ms-transform: rotateY(0deg); |
|
} |
|
.wave-back{ |
|
text-align: center; |
|
|
|
-webkit-transform: rotateY(-180deg); |
|
-moz-transform: rotateY(-180deg); |
|
-ms-transform: rotateY(-180deg); |
|
} |
|
</style> |
|
<script> |
|
|
|
</script> |
|
<body> |
|
<div class="wave-button"> |
|
<div class="wave-dissolve"></div> |
|
<div class="wave-return"></div> |
|
<div class="wave-content"> |
|
<div class="wave-flip"> |
|
<div class="wave-front">Front</div> |
|
<div class="wave-back">Back</div> |
|
</div> |
|
</div> |
|
</div> |
|
</body> |
|
</html> |
