純CSS製作掃光效果 – pure css light sweep

CSS 的 animation屬性可以鬆地達到掃光(流光)效果。
<PREVIEW>
20161004
<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 .flash:after {
	content: '';
	position: absolute;
	height: 400%;
	width: 30%;
	top: -180%;
	left: 0;
	opacity: 0.6;
	background-image: url(light01.png);
	background-size: 100%;
	background-position: center;
	animation-name: flashLight;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}
.button img {
	width: 100%;
	z-index: 1;
}
@-webkit-keyframes flashLight {
	from {
		left: -50%;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	to {
		left: 100%;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		opacity: 0.6;
	}
}
@keyframes flashLight {
	from {
		left: -50%;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	to {
		left: 100%;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		opacity: 0.6;
	}
}

<download>
CLICK HERE

發佈留言

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