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