<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
:root{
--color: rgb(211,68,52);
}
.list{
display: flex;
}
.list > div{
width: 100px;
height: 100px;
margin-left: 20px;
margin-top: 20px;
}
/* bg start */
@keyframes lightenBgColor {
from {
background-color: var(--color)
}
to{
background-color: #fff
}
}
@keyframes darkenBgColor {
from {
background-color: var(--color)
}
to{
background-color: #000
}
}
/* bg end */
/* property start */
@keyframes lightenColor {
from {
--lightenColor: var(--color)
}
to{
--lightenColor: #fff
}
}
@keyframes darkenColor {
from {
--darkenColor: var(--color)
}
to{
--darkenColor: #000
}
}
@property --lightenColor {
syntax: '<color>';
inherits: false;
initial-value: #fff;
}
@property --darkenColor {
syntax: '<color>';
inherits: false;
initial-value: #000;
}
/* property end */
.con1{
--darken: color-mix(in srgb, var(--color), #000 20%);
background-color: var(--darken);
}
.con2{
--lighten: color-mix(in srgb, var(--color), #fff 20%);
background-color: var(--lighten);
}
.con4{
background: linear-gradient(rgba(255,255,255,.2) 0 0), linear-gradient(var(--color) 0 0);
}
.con3{
background: linear-gradient(rgba(0,0,0,.2) 0 0), linear-gradient(var(--color) 0 0);
}
.con5{
animation: darkenBgColor .001s 0.2 linear forwards;
}
.con6{
animation: lightenBgColor .001s 0.2 linear forwards;
}
.con7{
background-color: var(--darkenColor);
animation: darkenColor .001s 0.2 linear forwards;
}
.con8{
background-color: var(--lightenColor);
animation: lightenColor .001s 0.2 linear forwards;
}
.con9{
background-color: var(--color);
filter: brightness(.8);
}
.con10{
background-color: var(--color);
opacity: .8;
/* filter: brightness(1.2) */ /* 效果不同 */
}
</style>
<div class="list">
<div class="con1"></div>
<div class="con2"></div>
</div>
<div class="list">
<div class="con3"></div>
<div class="con4"></div>
</div>
<div class="list">
<div class="con5"></div>
<div class="con6"></div>
</div>
<div class="list">
<div class="con7"></div>
<div class="con8"></div>
</div>
<div class="list">
<div class="con9"></div>
<div class="con10"></div>
</div>
</body>
</html>
颜色变浅和变淡的方法主要有，color-mix混合，多背景颜色重叠，动画渐变截断，亮度滤镜，透明度等。
标签：darkenColor,darken,linear,sass,color,lighten,--,background,var From： https://www.cnblogs.com/mengff/p/17507899.html