在網頁設計中，CSS可以幫助我們實現很多有趣的效果，比如圓盤旋轉。下面就為大家介紹如何使用CSS實現圓盤旋轉。

.disk {
width: 250px;
height: 250px;
border-radius: 50%;
border: 20px solid black;
position: relative;
animation: rotate 5s infinite linear;
}
.disk::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 20px;
height: 50%;
background-color: red;
transform-origin: center bottom;
transform: translateX(-50%) rotate(0deg);
animation: rotate 5s infinite linear;
}
.disk::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
width: 20px;
height: 50%;
background-color: yellow;
transform-origin: center top;
transform: translateX(-50%) rotate(180deg);
animation: rotate 10s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

上述代碼中，首先我們定義了一個.disk類表示我們的圓盤，使用border-radius屬性設置圓形，再通過border屬性設置邊框，最后使用position屬性設置其定位方式為相對定位。接著使用偽類:before和:after來分別表示圓盤上下兩個三角形，通過實現不同的transform屬性以及animation屬性來控制三角形的旋轉效果。最后，通過@keyframes關鍵字定義動畫來實現整個圓盤的旋轉效果。

最終，我們可以在HTML中使用.disk類來完成圓盤旋轉的設計。

<div class="disk"></div>

以上就是使用CSS實現圓盤旋轉的全部代碼，希望能對大家有所幫助。