小小编程师旋转木马编程

以下是一个简单的旋转木马效果的HTML和CSS代码示例：

html

css

body {

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.carousel-container {

width: 300px;

overflow: hidden;

}

.carousel {

display: flex;

width: 1500px; /* 300px * 5 items */

animation: carousel-animation 10s infinite linear;

}

.item {

width: 300px;

height: 200px;

text-align: center;

line-height: 200px;

font-size: 2em;

border: 1px solid #ccc;

}

@keyframes carousel-animation {

0% {

transform: translateX(0);

}

100% {

transform: translateX(-1200px); /* 300px * 5 items = 1500px, 每次平移300px */

}

}

通过上面的HTML和CSS代码，可以实现一个简单的旋转木马效果，其中包含5个旋转木马项。可以根据需要自定义旋转木马的样式和动画效果。