我们常常看到的高光划过效果,其实用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高光动画效果代码。
相关专题
相关推荐
标签:
留言与评论(共有 0 条评论) |