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); 
    } 
}

原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/18872.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论