web----特效

一、阴影

box-shadow、text-shadow

阴影：横向偏移量 纵向偏移量 模糊距离 阴影颜色

二、滤镜

模糊

filter: blur(4px);

亮度

filter: brightness(.75); 

对比度

filter: contrast(2);

阴影 

filter: drop-shadow(5px 5px 5px tomato);

灰度

filter: grayscale(1); 

色相转变

filter: hue-rotate(360deg);

反转图像（胶卷底色）

filter: invert(1);

透明度 

filter: opacity(.25); 

饱和度

filter: saturate(2); 

褐色 

filter: sepia(0.5);

三、渐变

linear-gradient、radial-gradient

背景图：渐变(方向, 颜色1 百分比, 颜色2 百分比 ,…)

例：

div{

background-image:-webkit-linear-gradient(left ,cyan 20%,gold 50%,tomato ,hotpink,skyblue);

background-image:-moz-linear-gradient(left ,cyan 205,gold 50%,tomato ,hotpink,skyblue);

background-image:linear-gradient(left ,cyan 20%,gold 50%,tomato ,hotpink,skyblue);  

}

四、过渡

transition:.3s;

/* linear 匀速 */

五、变形

平移

transform: translateX(100px); 

旋转  deg  trun  grad (三种单位）

transform: rotateZ(360deg); 

transform: rotate(1turn); 

transform: rotate(400grad); 

transform: rotateX(90deg);

伸缩 

transform: scaleY(.2); 

transform: scale(3); 

倾斜/拉扯 

transform: skewX(90deg); 

3d效果

transform-style: preserve-3d;