在網(wǎng)頁開發(fā)中，旋轉(zhuǎn)木馬是一種常用的展示效果。如果想要在網(wǎng)頁上實現(xiàn)旋轉(zhuǎn)木馬的效果，可以使用 CSS 來編寫代碼。

.carousel {
position: relative;
margin: 0 auto;
width: 100%;
overflow: hidden;
}
.carousel .slides {
display: flex;
width: calc(100% * 4);
transform: translateX(-100%);
animation: slide 10s infinite;
}
.carousel .slides .slide {
width: 25%;
}
@keyframes slide {
0% {
transform: translateX(0%);
}
20% {
transform: translateX(0%);
}
25% {
transform: translateX(-100%);
}
45% {
transform: translateX(-100%);
}
50% {
transform: translateX(-200%);
}
70% {
transform: translateX(-200%);
}
75% {
transform: translateX(-300%);
}
95% {
transform: translateX(-300%);
}
100% {
transform: translateX(-400%);
}
}

上述代碼中的 .carousel、.slides 和 .slide 分別表示旋轉(zhuǎn)木馬的容器、幻燈片容器和每個幻燈片。通過設置 .slides 的寬度為 4 倍的父元素寬度，每個幻燈片占 25% 的寬度，然后通過 transform 屬性實現(xiàn)滑動的效果。

通過調(diào)整 keyframes 中的百分比，可以實現(xiàn)不同的旋轉(zhuǎn)木馬效果。