css彩带怎么画 |css 自适应屏幕高度

.rainbow {
height: 30px;
position: relative;
overflow: hidden;
}
.rainbow span {
position: absolute;
display: block;
width: 200%;
height: 30px;
margin-left: -50%;
animation: rainbow 3s linear infinite;
}
.rainbow span:nth-child(1) {
background-color: #FF0000;
}
.rainbow span:nth-child(2) {
background-color: #FFA500;
}
.rainbow span:nth-child(3) {
background-color: #FFFF00;
}
.rainbow span:nth-child(4) {
background-color: #008000;
}
.rainbow span:nth-child(5) {
background-color: #0000FF;
}
.rainbow span:nth-child(6) {
background-color: #4B0082;
}
.rainbow span:nth-child(7) {
background-color: #EE82EE;
}
@keyframes rainbow {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}

首先大家需要创建一个容器，它的高度需要根据你的需求来设定。大家这里设定的高度是30像素。然后大家给容器设置overflow: hidden，这样就可以隐藏掉超出容器的部分。

接下来大家需要在容器内部创建一个或多个span元素来实现彩带的效果。每个span元素需要设置为绝对定位，这样它们就可以叠加在一起。大家还需要给每个span元素设置宽度为200%，这样它们就可以完全覆盖容器。为了让每个span元素在容器中居中，大家还需要设置margin-left: -50%。

接下来大家需要给每个span元素分别设置不同的背景颜色，这里大家选择了七种颜色。大家可以根据自己的需要来选择颜色。

最后大家需要为每个span元素添加一个关键帧动画，这样它们才能动起来。大家这里设置动画时间为3秒，并且线性运动。运动的方式是使用translateX()来改变每个span元素的horizontal方向上的位置。

以上就是CSS彩带的实现方法。你可以根据自己的需要来定制它的样式和效果，让你的网站更加丰富多彩。