使用css / scss或js动态实现颜色效果不透明度/渐变？

Question

我正着手建立自己的动态手风琴，我希望每个标签看起来像图像。例如，每个都可以是带有div子项或列表的标题标记。

手风琴将是动态的，用户可以随意添加更多标签。顶级将是兄弟元素，他们将有孩子下拉（也是动态）。

我无法找到一个解决方案，从第一个兄弟姐妹开始依次迭代每个兄弟姐妹的颜色，并在迭代时淡化或淡化颜色？

构建我自己的手风琴的想法是尽可能让它变得轻盈，以便需要考虑。谁能指出我正确的方向？

编辑 试图添加codepen但它不会让我。请参阅下面的评论链接。

Answer 1

使用Jquery，我的方法将是这样的：

//First start with a string to store the color whitout alpha
var color="rgba(180,125,255,";

function repaint() {
  //Know how many tabs you have and which is the % increment you need
  var all = $('.tab').length,
      total = 10/all;

  //Iterate over all elements and set the new color based on Index
  $('.tab').each(function(i){
    var opacity = (total*(all-i))/10,
        newTone = color+opacity+")";
    $(this).css('background-color',newTone)
  })
}
repaint()

Codepen Demo

您仍有很多方法可以改进此代码，例如简化颜色输入以接受HEX和其他值。

Snippet Demo

＆＃13;

＆＃13;

var color = "rgba(180,125,255,";

function repaint() {
  var all = $('.tab').length,
    total = 10 / all;
  $('.tab').each(function(i) {
    var opacity = (total * (all - i)) / 10,
      newTone = color + opacity + ")";
    $(this).css('background-color', newTone)
  })
}
repaint()

$('button').on('click', function(e) {
  e.preventDefault();
  $('body').append('<div class="tab"></div>')
  repaint()
})

＆＃13;

.tab {
  height: 40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add Tab</button>
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不要想，有一个简单（动态）的CSS解决方案......

使用JS，您可以在hsl中创建一个起始颜色，获取每行的行数和/减少亮度行并将其添加为样式;）

e.g。

var brightness = 100;
var startColor = "hsl(0, 100%," + brightness + "%)";

然后迭代你的线并de /增加亮度+添加到你的元素。

在这里你可以阅读有关hsl并使用它的内容： https://www.w3schools.com/colors/colors_hsl.asp

Cheerio：）

Answer 3

Well it took me a minute to debug my answer so I'm late. But I wanted to share it anyway..

jsfiddle

css

ul {
  list-style: none;
}

.accordian li {
  padding: 1rem;
  background-color: yellow
}

html

<ul class="accordian">
  <li class="entry" for="entry in Accordian.entries"><a href="${entry.value}">${entry.key}</a></li>
</ul>

js

function addAlphaChannel(e, alpha) {
  const oldBGColor = window.getComputedStyle( $(e)[0] , null).getPropertyValue('background-color')
  let r,g,b;
  [r,g,b] = oldBGColor.match(/\d+/g)
  const newBGColor = `rgba(${r}, ${g}, ${b}, ${alpha})`

  $(e).css({ 'background-color': newBGColor })
}

const Accordian = {
  entries: {
      a: '/a',
    'and b': '/b'
  }
}

const Exposed = { Accordian }

$('[for]').each((idx,e) => {
  let key, collection, carr, template
    [key, collection] = $(e).attr('for').split(' in ')
  carr = collection.split('.')
  collection = carr.reduce((o,i)=>o[i], Exposed)

  template = $(e).html()
  let inner, i, cnt
  cnt = Object.entries(collection).length
  Object.entries(collection).forEach((k, ix) => {
    i = {key:k[0], value:k[1]}
    inner = template
        .replace('${'+key+'.key'+'}', i.key, 'g')
        .replace('${'+key+'.value'+'}', i.value, 'g')
    inner = $(e).clone().html(inner)
    $(inner).appendTo($(e).parent())
      .removeAttr('for')
    addAlphaChannel(inner, (cnt-ix)/cnt)
  })
  $(e).remove()
})

Answer 4

好的，这是我得到的最好的。如果颜色变得更轻，更轻，更轻，最终会变白，对吧？所以，你的手风琴应该有一个有限数量的标签，最后一个可能的标签是白色的。

我可能会创建一个指定阴影的数组（从黄色到白色），然后每次添加新选项卡时迭代遍历此数组，以找到未使用的下一个颜色。我会给你一些代码，但由于我不知道你是如何创造这种手风琴的，所以我做不了多少。

您最好的选择是使用Javascript创建新标签并从阵列中动态添加颜色。

另外，这里有一个指向超级有用网站的链接，该网站会生成颜色并显示该颜色的一堆色调：Coolors.co

祝你好运！