k子供のために徐々に色を設定する方法？

私はクラスtab_titleの子供を持っていますが、徐々に背景をcolor1からcolor2にペイントしたいと思います。第2オレンジ（＃FF8000）の場合、第1要素の背景が赤（＃FF0000）、色が赤（＃FF0000）、色2 =黄（＃FFFF00） 3番目は黄色です（＃FFFF00）。 k = 5、color1 = white、color2 = blackの場合、第1は白、第2はgray25％、第3はgary50％、第4はgary75％、第5は黒である。k子供のために徐々に色を設定する方法？

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%)); 
     } 
    } 
}

と唯一のことは何とか自動的kをカウントしている行方不明その後

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

は、私は代わりにgradbg(3,$from,$to)

感謝のgradbg(k,$from,$to)を使用することができます。

私は、次のコードを使用していますロット、

Guy

出典

2017-01-04 Spätzle

私はハードコードされた配列の値に対してこれを行っています。ロジックを調整して、それを取得するための再帰関数を作成するかもしれません。

<!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>

出典

2017-01-04 07:06:54

私が指摘したように、私は（私は自分自身を実装するために管理している）JSソリューションを望んでいません。 cssしてください。 –

あなたは持っているもののバイブルを作れますか？私はあなたをもっと助けることができます。 –

@Spätzle私はこれを行うことができます、そのjavascriptを再び使用します。ここでフィドルリンクを投稿して、私はそれを編集することができます。 –

k子供のために徐々に色を設定する方法？

答えて

関連する問題