关于前端:妙用-CSS-动画来实现颜色加深减淡等混合操作

欢送关注我的公众号：前端侦探

在上一篇 CSS 如何依据背景色主动切换黑白文字？中，讲述了文本自适应背景色的一些小技巧，不过还存在肯定局限性，比方：如果是背景是渐变色该怎么办？

很容易想到的思路是将两个渐变色取过渡中间色，而后再通过后面的形式转换就行了

那么问题来了，有没有方法通过 CSS 实现两头色彩的获取呢？明天来一起探讨这个问题，聊一聊对于色彩合成的相干技巧。

一、你可能不晓得 CSS 动画小技巧

想必大家都用过 CSS 动画，比方

@keyframes color {
  from {color: yellow}
  to{color: deeppink}
}
.text{animation: color 1s linear forwards;}

这样就失去了一个色彩从 yellow 到deeppink的动画

这个没什么好说的。

默认状况下，动画会播放 1 次后完结，而后设置了forwards，会保留在最初一帧状态。

那么，如果动画只播放一半，是不是就正好处于两者色彩的两头 ？其实， 播放次数也能够是小数的 ，比方能够将播放次数设置为0.5 次，就像这样

.text{animation: color 1s .5 linear forwards;}

成果如下

因为只播放了一半，所以到两头的橙色就进行了下来。

值得一提的是，通过这种形式失去的色彩，也是能够用 JS 去获取的

那么，利用这个个性，能够实现色彩的各种合成成果。

二、突变背景下的文本自适应

回到后面的问题，如果是突变背景，该如何实现主动切换黑白文字呢？

假如突变的两种色彩别离是 --c1 和--c2，

<div class="box" style="--c1: #ffeb3b; --c2: deeppink">
  <span class="txt"> 前端侦探 </span>
</div>

那么依据上一节的办法，能够将动画革新成这样

@keyframes color {
  from {color: var(--c1)
  }
  to{color: var(--c2)
  }
}

咱们这里只是须要获取一下色彩，并不需要动画，所以能够将动画时长设置为很小的一个数，比方0.001s

.txt{animation: color .001s .5 linear forwards;}

这样文字色彩就主动变成了突变色彩的两头值，如下

而后再利用滤镜，将文字转换成彩色或者红色

.txt{
  animation: color .001s .5 linear forwards;
  filter: grayscale(1) contrast(9999) invert(1);
}

成果如下

也能完满适配任意渐变色

残缺代码能够查看以下任意链接

• CSS auto-gradient-color (codepen.io)
• CSS auto-gradient-color (runjs.work)

三、色彩的加深和减淡

再来看一个更加实用的例子，色彩的加深和减淡。通常用于主题色的生成，比方给定一个主题色，生成一系列和它相匹配的邻近色。上面是色彩逐步减淡，最终变为红色的色阶图

依据下面的原理，能够很轻易的实现这样一个成果

假如 HTML 是这样的，每个方块给一个不同的 CSS 变量--l

<div class="box" style="--l:0"></div>
<div class="box" style="--l:0.2"></div>
<div class="box" style="--l:0.4"></div>
<div class="box" style="--l:0.6"></div>
<div class="box" style="--l:0.8"></div>
<div class="box" style="--l:1"></div>

而后创立一个 从主题色到红色的动画，依据这个变量，让动画执行不同的次数

.box{animation: lighterBackgroundColor .001s var(--l) linear forwards;
}
@keyframes lighterBackgroundColor {
  from {background-color: var(--primary-color)
  }
  to{background-color: #fff}
}

这样就能够生成同种色彩，不同深浅度的主题色了

有同学可能会说像 sass、less这些不也能实现吗？其实不然，这些都是预处理器，生成当前就不能再变了，而这种形式是实时绘制的，能够实现批改，如下

残缺代码能够查看以下任意链接

• CSS lighten (codepen.io)
• CSS lighten (runjs.work)

如果将这种技巧用到理论我的项目中也是十分完满，上面是不同主题色下的预览成果

选中背景色就是减淡 80% 后的色彩

.item.current{border-color: var(--primary-color);
  animation: lighterBackgroundColor .001s .8 linear forwards;
}

原理是完全相同的，这里就不具体介绍了，残缺代码能够查看以下任意链接

• CSS color-mix (codepen.io)
• CSS color-mix (runjs.work)

除此之外，依据需要，还能够通过色彩透明度的变动来生成特定透明度的主题色

@keyframes OpacityBackgroundColor {
  from {background-color: var(--primary-color)
  }
  to{background-color: rgba(0,0,0,0)
  }
}

四、将来最期待的几个色彩处理函数

官网也看到了这种需要，因而在 CSS Color Module Level 5 中起草了几个对于色彩合成的函数，这里简略介绍一下

首先是颜色混合color-mix，将两种色彩依照肯定的比例进行交融

color-mix(in srgb, white, blue);

这示意 white 和blue依照各自 50% 进行混合，最终会失去紫色rgb(50% 50% 100%)

如果要管制混合比例，能够这样

color-mix(in srgb, white 20%, blue);

还有一个叫做绝对色彩relative color ，其实是对原有的色彩函数进行了补充，依据我的了解，能够将这个个性设想成 JS 中的解构赋值

hsl(from var(--accent) h s calc(l - 20%))

例如这个示意将色彩 --accent 分解成 h、s、l 三个变量，而后对其中的l，也就是亮度缩小20%，也就达到了色彩变暗的目标

如许令人兴奋的个性！目前这两个个性仅在 safari 15+试验性功能开启反对（😂终于不拖后腿了）

五、总结一下

以上就是本文全部内容了，次要是利用 CSS 动画的过渡个性，间接达到了颜色混合的目标，上面是一些要点：

1. CSS 动画的次数也能设置成小数，比方 0.5 示意动画只运行到一半
2. 两个色彩的中间色就是色彩动画运行到一半的状态
3. 色彩减淡能够看成是主题色到红色的动画，加深则是彩色
4. 官网曾经正在起草 CSS 色彩合成相干函数，目前仅 Safari 试验性反对

你学会了吗？总的来说，在 color-mix 到来之前，这样一个小技巧还算是不错的解决方案。最初，如果感觉还不错，对你有帮忙的话，欢送 点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探