我们常常看到的高光划过效果,其实用CSS就能实现,CSS3高光划过效果代码教程方法
CSS3高光划过效果代码
.logo-wrapper { position: relative; font-size:2em; font-weight:700; line-height:39px; overflow:hidden; margin:0; } .logo-wrapper::before{ content:""; position: absolute; width: 150px; height: 10px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 1s ease-in 1s infinite; animation: searchLights 1s ease-in 1s infinite; } @-webkit-keyframes searchLights { 0% { left: -90px; top: 0; } to { left: 90px; top: 0; } }
.logo-wrapper为需要增加效果的盒子,.logo-wrapper::before为添加的一道高光,@-webkit-keyframes searchLights高光动画效果代码。
本文转载自:精准像素:11px.cn ,感谢作者分享实用知识