大纲

csss实用属性text-text-transform css混合模式mix-blend-mode 属性背景混合：background-blend-mode CSS函数cubic-bezier() 函数

csss实用属性

text-text-transform

text-transform:uppercase/capitalize/lowercase /none/inherit （大写/首字母大写/小写/默认/继承）

css混合模式

mix-blend-mode 属性

描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合

语法：mix-blend-mod:

支持的值：

mix-blend-mode: normal; //正常 mix-blend-mode: multiply; //正片叠底 mix-blend-mode: screen; //滤色 mix-blend-mode: overlay; //叠加 mix-blend-mode: darken; //变暗 mix-blend-mode: lighten; //变亮 mix-blend-mode: color-dodge; //颜色减淡 mix-blend-mode: color-burn; //颜色加深 mix-blend-mode: hard-light; //强光 mix-blend-mode: soft-light; //柔光 mix-blend-mode: difference; //差值 mix-blend-mode: exclusion; //排除 mix-blend-mode: hue; //色相 mix-blend-mode: saturation; //饱和度 mix-blend-mode: color; //颜色 mix-blend-mode: luminosity; //亮度

mix-blend-mode: initial; //初始 mix-blend-mode: inherit; //继承 mix-blend-mode: unset; //复原

注：元素应用混合模式，默认情况下，会混合Z轴上所有层叠顺序比其低的元素，可以用isolation:isolation进行阻断（形成新的层叠上下文），只要元素可以创建层叠上下文，就可以阻断mix-blend-mode(具体：https://blog.csdn.net/HDdgut/article/details/108398021)

背景混合：background-blend-mode

属性值与上面一致，指的是背景层的图片与颜色的混合

CSS函数

cubic-bezier() 函数

定义了一个贝塞尔曲线(Cubic Bezier)，将以一条直线放在范围只有 1 的坐标轴中，并从中间拿出两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意），最后形成的曲线就是动画的速度曲线。cubic-bezier() 可用于 animation-timing-function 和 transition-timing-function 属性，p1(0,0),p3(1,1)是默认的，p1(x1,y1),p2(x2,y2)，X轴的取值必须在（0,1），Y轴没有限定

应用举例：

transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);

transition-timing-function:cubic-bezier(0,0,1,1)；（待补充各种效果的实现）