逐步更改颜色 [英] Changing color incrementally

问题描述

#mainbody :nth-child(1){
    border-color: #FFCC00;
}
#mainbody :nth-child(2) {
    border-color: #FFAA00;
}
#mainbody :nth-child(3) {
    border-color: #FF8800;
}
#mainbody :nth-child(4) {
    border-color: #FF6600;
}

这很尴尬，特别是如果你再添加20个孩子。是否可以使用这样的东西， calc（）的位置并在 rgb（）中使用它？

This is awkward, especially if you add another 20 children. Would it be possible to use something like this, feeding calc() the position and using it in rgb()?

有另一种方法吗？ （ counter（）？）

Is there another way of doing this? (counter()?)

#mainbody h2 {
    border-color: rgb(255, calc( 255 / ( childposition / 4 ) ) ,0);
}

下面显示promise但我不认为 rgb（）接受内部计数器（）：

The following shows promise but I don't think rgb() accepts an internal counter():

body {
    counter-reset: headcolors 255;
}
h2:after {
    counter-increment: headcolors -34;
    content: "rgb(255," counter(headcolors) ",0);";
}
h2 {
    counter-increment: headcolors -34;
    color: rgb(255,counter(headcolors),0);
}

推荐答案

你想要一个CSS解决方案，我建议你使用基于SASS / LESS的解决方案。

Since you haven't said that you want a CSS only solution, I would recommend you to use a SASS/LESS based solution.

http://sassmeister.com/gist/925757ff999824ec0270

$baseColor: #FFCC00;

@for $i from 1 to 5 {
  #mainbody :nth-child(#{$i}) {
      border-color: adjust-color($baseColor, $green: ($i - 1) * 1);
  }
  $i: $i + 1;
}

上述代码生成：

#mainbody :nth-child(1) {
  border-color: #ffcc00;
}

#mainbody :nth-child(2) {
  border-color: #ffcd00;
}

#mainbody :nth-child(3) {
  border-color: #ffce00;
}

#mainbody :nth-child(4) {
  border-color: #ffcf00;
}

这篇关于逐步更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！