射線旋轉CSS是一種非常炫酷的CSS效果，可以讓你的網站更加動感和富有活力。在這篇文章中，我們將學習如何實現一個射線旋轉CSS效果，讓網站更加吸人眼球。

.ray{
position: relative;
height: 200px;
width: 200px;
margin: 50px auto;
overflow: hidden;
}
.ray:before{
content: "";
position: absolute;
left: -150%;
top: -150%;
width: 200%;
height: 200%;
border-radius: 50%;
background: linear-gradient(white, transparent);
animation: ray-rotate 2s linear infinite;
}
@keyframes ray-rotate {
100% {
transform: rotate(360deg);
}
}

以上代碼是實現射線旋轉CSS效果的關鍵代碼。首先，我們為旋轉效果的容器添加了一些必須的樣式，如相對定位、高度和寬度等等。然后，我們使用偽元素:before來創建射線的形狀，并將其定位到一個超出容器范圍的位置。我們還使用了border-radius屬性來讓射線呈現圓形。

最后，我們定義了一個旋轉的動畫，使用了transform: rotate屬性來旋轉射線。將動畫應用到before偽元素上，并設置無限循環。通過這些代碼，我們就可以創建一個炫酷的射線旋轉CSS效果。