CSS

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

Posted by JA Anything on 2016-10-06

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

發佈留言取消回覆