如何为k个孩子逐渐设置颜色？答案

【问题标题】：How to gradually set color for k children?如何为k个孩子逐渐设置颜色？
【发布时间】：2017-05-18 09:21:25
【问题描述】：

我有k个班级tab_title的孩子，我想逐渐将他们的背景从color1画到color2。

例如：如果 k=3, color1=red(#FF0000), color2=yellow(#FFFF00) 那么第一个元素的背景是红色（#FF0000），第二个是橙色（#FF8000），第三个是黄色（# FFFF00); k=5，color1=white，color2=black，那么第一个是白色，第二个是gray25%，第三个是gary50%，第四个是gary75%，第五个是黑色。

我希望它适用于任何k，而无需明确指定每个nth-child() 的音调。纯粹用css或sass做这件事的任何方式？由于可以添加或删除类，因此我宁愿不涉及任何 JS 代码。

我正在使用以下代码：

@mixin gradbg($n, $c1, $c2){
    @for $i from 1 through $n {
        &:nth-child(#{$i}) {
            background-color: mix($c1,$c2,((1 - (($i - 1) / ($n - 1)))*100%));
        }
    }
}

然后

li.tab_title{
    $from: #097380;
    $to: #4da759;
    @include gradbg(3,$from,$to);
}

唯一缺少的就是自动计数k，所以我可以使用gradbg(k,$from,$to) 而不是gradbg(3,$from,$to)

非常感谢，

男人

【问题讨论】：

标签： html css sass compass-sass

【解决方案1】：

我已经为硬编码的数组值完成了它，也许你可以调整逻辑并制作一个递归函数来获取它。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
            li{
                height: 100px;
                width: 100px;
            }
        </style>
    </head>
    <body>

        <ul>
            <li class="tab"></li>
            <li class="tab"></li>
            <li class="tab"></li>
        </ul>

        <script>
         var k = ["#FF0000", "#FFFF00"];
         var hex = [];
         var intermeidate_color = "";

         function hexToRgb(hex) {
            var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? {
                r: parseInt(result[1], 16),
                g: parseInt(result[2], 16),
                b: parseInt(result[3], 16)
            } : null;
        }

        k.map(function(item, index){
            hex.push({
                r : hexToRgb(item).r,
                g : hexToRgb(item).g,
                b : hexToRgb(item).b
            })
        });

        console.log(hex);

        for (var i = 0; i < hex.length - 1; i++) {
            intermeidate_color = {
                r : parseInt((hex[i].r + hex[i+1].r) / 2),
                g : parseInt((hex[i].g + hex[i+1].g) / 2),
                b : parseInt((hex[i].b + hex[i+1].b) / 2)
            }
        }

        function rgbToHex(r, g, b) {
            return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
        }


        k.splice(1, 0, rgbToHex(intermeidate_color.r, intermeidate_color.g, intermeidate_color.b));
                

        var tabs = document.getElementsByClassName('tab');
        for (var i=0; i < tabs.length; i++) {
            tabs[i].style.backgroundColor = k[i];
        }
        //document.body.style.backgroundColor = rgbToHex(intermeidate_color.r, intermeidate_color.g, intermeidate_color.b);
        </script>
    </body>
</html>

【讨论】：

正如我所指出的，我不想要一个 JS 解决方案（我自己设法实现了它）。请使用css。
你能把你得到的东西摆弄一下吗？我可以帮你更多。
@Spätzle 我可以这样做，它再次使用 javascript。把你的小提琴链接贴在这里，我可以编辑它。
正如我所说，我已经有了一个有效的 javascript 解决方案，我不需要另一个。我想知道是否有任何 CSS 解决方案。
明白了..！！我刚刚遇到sass-lang.com/documentation/Sass/Script/…。 mix 可能会有所帮助。