純CSS製作手指點擊動態 – pure css click animation

CSS 的 animation屬性可以鬆地製作手指點擊動態。
<PREVIEW>
20161006
<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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *