如何只用 css 循环一组颜色？

李梦楠

38246

发布于
2017-02-07

rt, 我想只用 css 循环一组颜色作为一组 div 的背景，

大概样子就是这样

红蓝绿黄红
蓝绿黄红蓝
绿

四个颜色，按照顺序循环。

ps: 我尝试使用 nth-child 没有能解决。

css

阅读 10.4k

6 个回答

得票最新

EdwardUp

5.9k346

发布于
2017-02-07

✓ 已被采纳

试了下 nth-child 应该是可以的。参考：

<div class="total-container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <!-- ... -->
</div>

.item{
    height: 20px;
    margin-bottom: 10px;
}
.item:nth-child(4n+1){
    background: red;
}
 .item:nth-child(4n+2){
    background: blue;
}
 .item:nth-child(4n+3){
    background: green;
}
 .item:nth-child(4n+4){
    background: yellow;
}

要点是这个n，它是非负整数，可以取0。

vsion

5.1k71839

发布于
2017-02-07

:nth-child(4n - 3)
:nth-child(4n - 2)
:nth-child(4n - 1)
:nth-child(4n)

p2227

2k96696

发布于
2017-02-07

https://jsfiddle.net/v1sqnk55/

米花儿团儿

1.3k11028

发布于
2017-02-07

……我知道用预处理的可以，粘贴了一份sass的使用方法

/sass style
//-------------------------------
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//css style
//-------------------------------
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

guojindai

403

发布于
2017-02-07

下面是一个div的思路，一组div也差不多

<html>
<head>
  <style>
  div {
    width: 160px;
    height: 100px;
    animation: colorful 5s infinite;
  }
  @keyframes colorful {
    0% {
      background: red;
    }
    25% {
      background: blue;
    }
    50% {
      background: green;
    }
    75% {
      background: yellow;
    }
    100% {
      background: red;
    }
  }
</style>
</head>
  <div></div>
</html>