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

 

posted @ 2020-10-22 11:12  newmiracle宇宙  阅读(938)  评论(0编辑  收藏  举报