CSS 的 animation屬性可以鬆地製作手指點擊動態。
<PREVIEW>
<HTML>
<a class="button"> <div class="flash"></div> <img src="index_gobt.png" alt=""> </a>
<CSS>
.button {
position: absolute;
left: 25%;
top: 25%;
width: 50%;
}
.button .flash {
overflow: hidden;
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
}
.button:after {
content: '';
position: absolute;
left: 18%;
top: 80%;
background-image: url(hand.png);
background-size: contain;
background-repeat: no-repeat;
height: 40px;
width: 40px;
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
-moz-animation: floatUpDown 1.6s ease-in-out infinite;
-webkit-animation: floatUpDown 1.6s ease-in-out infinite;
animation: floatUpDown 1.6s ease-in-out infinite;
}
.button img {
width: 100%;
z-index: 1;
}
@-webkit-keyframes floatUpDown {
0% {
-webkit-transform: translate(0, 12px);
transform: translate(0, 12px);
}
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0px);
}
100% {
-webkit-transform: translate(0, 12px);
transform: translate(0, 12px);
}
}
@keyframes floatUpDown {
0% {
-webkit-transform: translate(0, 12px);
transform: translate(0, 12px);
}
50% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0px);
}
100% {
-webkit-transform: translate(0, 12px);
transform: translate(0, 12px);
}
}
<DOWNLOAD>
CLICK HERE