阴影渐变过渡变形过滤

特效

1.阴影

• box-shadow盒子阴影、text-shadow文本阴影

• 阴影（四个值）：横向偏移量 纵向偏移量 模糊距离 阴影颜色

2.渐变

• linear-gradient线性渐变、radial-gradient径向渐变

• background-image：渐变（方向，颜色1 百分比，颜色2 百分比...）

3.过渡

（1）transition在不是动画的情况下变换状态

transition：all(属性名) 1s(事件) 0.1s(延迟时间) linear(速度曲线)

（2）transition-property设置过渡属性

transition-property：值 全部属性

（3）transition-duration定义过渡时间

（4）transition-delay定义延时执行时间

（5）transition-timing-function过渡效果的事件曲线

linear(匀速)：cubic-bozier(0,0,1,1)

ease(慢 快 慢)：cubic-bezier(0.25，0.1，0.25，0.1)

ease-in(慢 快)：cubic-bezier(0.42，0，1，1)

ease-out(慢 快)：cubic-bezier(0，0，0.58，1)

ease-in-out(慢 快 慢)：cubic-bezier(0.42，0，0.58，1)

cubic-bezier(n n n n)在函数中可以定义自己的值，值得范围为0-1

4.变形

（1）transform：translate 平移（px）

（2）transform：rotate 旋转（deg）

5.滤镜

（1）模糊 filter:blue(4px) 取值：大于0

（2）亮度 filter:brightness(2) 取值：正自然数

（3）对比度 filter:contrast(2) 取值：正自然数

（4）阴影 filter:drop-shadow 取值：同box-shadow

（5）灰度 filter:grayscale(1) 取值：0-1

（6）色相旋转 filter：hue-rotate(deg) 取值：deg

（7）反转图像 filter：invert(1) 取值：0-1

（8）透明度 filter：opacity(1) 取值：0-1

（9）饱和度 filter：saturate(1) 取值：正自然数

（10）褐色 filter：sepia(1) 取值：0-1