Question

我希望有一个动态数量的div（有时是3，有时是10等），应根据颜色渐变（例如绿色到红色）进行着色。

因此，当只有两个div时，请将第一个设为#0F0，将第二个设为#F00。但是当有10个div时，使第一个和最后一个相同，但所有之间的颜色会逐渐从绿色变为红色。

有没有办法用纯css做到这一点？如果没有，你会用javascript做什么？我现在正在考虑使用javascript来做这件事，但是我会想到它的方式会变得非常复杂。任何建议？感谢

Answer 1

这是一个做你想要的小提琴;）

https://jsfiddle.net/tkzr99vx/

它会使用createDivs方法中传递的金额创建div。

使用rgb值，就像我对更简单的代码所做的那样。您仍然可以使用HEX值，但必须将其转换为rgb。

Answer 2

CSS不提供从输入中计算值所需的功能，例如javascript，因此我的个人建议是为不同数量的子项定义容器类。例如：

.two{
    div:nth-child(1){background-color: ...}
    div:nth-child(2){background-color: ...}
}

.three{
    div:nth-child(1){background-color: ...}
    div:nth-child(2){background-color: ...}
    div:nth-child(3){background-color: ...}
}

.four{
    div:nth-child(1){background-color: ...}
    div:nth-child(2){background-color: ...}
    div:nth-child(3){background-color: ...}
    div:nth-child(4){background-color: ...}
}

这方面的限制是它不是动态的，但它可以模拟所需的功能，直到您声明的任何类。

Answer 3

这是一个使用十六进制值的两种颜色的快速小脚本。

var elements = document.querySelectorAll('div');
var total = elements.length;
var step = 255 / (total - 1);

Array.prototype.forEach.call(elements, function(elem, i){
    var colorHexValue1 = (step * i).toString(16);
    var colorHexValue2 = (255 - step * i).toString(16);
    var formattedColor1 = ("0" + colorHexValue1).split('.')[0].slice(-2);
    var formattedColor2 = ("0" + colorHexValue2).split('.')[0].slice(-2);
    
    elem.style.backgroundColor = '#'+formattedColor1+formattedColor2+'00';
});

<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>
<div>content</div>

动态的div数量=动态颜色变化步骤？

3 个答案: