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 .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