css光束划过

效果   guangshu(2)-CSDN直播

.shu{
    position: absolute;
    width: 300rpx;
    height: 70rpx;
    content: '';
    display: block;
    top: -20%;
    left: -100%;
    transform: rotate(-30deg);
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0));
    animation: cross 4s infinite;
}
@keyframes cross{
               0%{
 
                }
                70%{
                    
                    top: 80%;
                    left: 100%;
                    transform: rotate(-45deg);
                }
                100%{
                    top: 80%;
                    left: 100%;
                    transform: rotate(-45deg);
                }
}