css3 简单的玻璃扫光效果
css3 简单的玻璃扫光效果
.ss { display: block; width: 800px; height: 370px; position: absolute; background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, .3), rgba(0, 0, 0, 0)); left: 0; top: 0; transform: rotate(-45deg) translate(0, -360px); animation: saoguangc 1s linear infinite; -webkit-animation: saoguangc 1s linear infinite; } @-webkit-keyframes saoguangc { 0% { transform: rotate(-45deg) translate(0, 100px); -webkit-transform: rotate(-45deg) translate(0, 100px); } 100% { transform: rotate(-45deg) translate(0, 400px); -webkit-transform: rotate(-45deg) translate(0, 400px); } } @keyframes saoguangc { 0% { transform: rotate(-45deg) translate(0, 100px); -webkit-transform: rotate(-45deg) translate(0, 100px); } 100% { transform: rotate(-45deg) translate(0, 400px); -webkit-transform: rotate(-45deg) translate(0, 400px); } }
如果遇到什么不懂的地方直接关注公众号留言(本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。)
作者:newmiracle
出处:https://www.cnblogs.com/newmiracle/