CSS實現光束循環效果

*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
/*定義一個類，用于循環產生元素*/
.loop{
width: 200px;
height: 200px;
margin: 20px;
perspective: 1000px;
}
/*定義偽類before，用于產生線性漸變光束*/
.loop::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(0, -50%, 0);
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(204, 204, 204, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
animation: beam 2s infinite linear;
}
/*定義動畫，使光束移動*/
@keyframes beam{
0%{
transform: translate3d(-150%, -50%, 0) rotateY(90deg);
}
100%{
transform: translate3d(150%, -50%, 0) rotateY(90deg);
}
}

說明：

該效果通過CSS循環產生元素，并利用偽類before來產生線性漸變的光束。同時，通過動畫來讓光束從左側進入畫面，經過中央，最后到達右側離開畫面。