CSS技術(shù)在網(wǎng)頁設(shè)計中扮演著重要的角色。而 “摩天輪效果” 是CSS在網(wǎng)頁設(shè)計中的又一個獨特魅力。 以下是摩天輪效果的代碼:

.container {
position: relative;
width: 20em;
height: 20em;
margin: 5em auto;
border-radius: 10em;
overflow: hidden;
 }
.wheel {
position: absolute;
top: -10em;
left: -10em;
width: 40em;
height: 40em;
border-radius: 20em;
background: #f00;
background-image: radial-gradient(circle, #fff 10%, transparent 10%),
radial-gradient(circle, #fff 10%, transparent 10%);
background-position: 0 0, 50% 50%;
background-size: 5em 5em, 5em 5em;
animation: spin 10s linear infinite;
 }
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
 }

這個效果使用了CSS的transform和animation屬性。容器div有一個圓形的邊框半徑，然后我們使用overflow: hidden屬性來隱藏多余的部分。摩天輪是擺放在這個容器上的。它的大小比容器大，上方溢出為負(fù)40%左右。

摩天輪由四個部分組成，分別是 輪軸、 動力窗口和 兩個車廂。開始時，車廂窗口顯示在最底下，摩天輪上下運動。而當(dāng)動力窗口經(jīng)過一輛車的時候，它將轉(zhuǎn)動并使得相應(yīng)的車廂上升到最高點。在代碼中，這個效果是通過一個用CSS的radial-gradient（徑向漸變）生成的兩個同心圓合成的。

我們可以使用CSS的transform來旋轉(zhuǎn)摩天輪，同時使用keyframe完成動畫。這個animation的名稱是spin，duration是10s，linear timing，表示線性平滑地旋轉(zhuǎn)，無限循環(huán)。

總的來說，這是一個令人印象深刻的摩天輪效果，可以輕松地實現(xiàn)，為網(wǎng)頁設(shè)計貢獻(xiàn)了獨特的視覺效果。