复盘 CSS3

CSS3样式

1.文字阴影 text-shadow

1.text-shadow:50px 50px 10px rgba(0,0,0,0.6)
水平偏移x 水平偏移y 羽化值 阴影颜色（0.6内外阴影）
2.鼠标经过出现阴影 .c1:hover{text-shadow}
3.过渡 transtion：all 1s；

2.盒子阴影box-shadow

.box{box-shadow:0px 0px 10px(羽化值) 10px(扩展值) rgba()}

3.定义离线字体@font-face{}

4.渐变背景图片

>1.线性渐变
>{background:linear-gradient(45deg（角度）,#000；#fff...)}
>2.重复渐变
>{background:repeating-linear-gradient(45deg,red 5%,...)}
>3.径向渐变（圆）先圆心角度 circle at center
>{background:repeating-radil-gradient(circle at left top 先颜色后范围)
>属性：circle at 100px 50px}

5.分栏

.box{
column-count:2;//分栏个数
column-gap:50px;//分栏间隔宽度
column-rule:1px dashed red;//分割线
}

6.过渡 transition

①.属性：1.过渡属性名 2.过渡时间 3.动画类型 4.延迟时间
简写：transition:all 1s linear 0s
对应属性：
1.ease逐渐缓慢、默认
2.linear 匀速
3.ease-in 加速
4.ease-out 减速
5.ease-in-out 先加速后减速
6.cubic-bezier 自定义[0,1]之间（x1,y1,x2,y2）
②.先背景1s color->圆角->边距->背景变化 用逗号隔开 1s返回
transition：background-color 1s linear 0s,
            margin-left:1s linear 1s,
            border-radius:1s linear 2s,
            box-shadow:1s linear 3s

7.变换 transform

transform-origin:0 300px; 修改变换中心
backface-visibility：visible；背面可见选项
box-shadow：0 0 20px #000；
变换①位置 transform：translateX(-50px);
       ②缩放 transform：scaleX(-50px)
       ③旋转 transform：rotateX(-50px)
       ④扭曲 transform：skewX(-50px)

透视值，添加父节点
-webkit-perspective：500；
-moz-                       ：500；
-ms-                         :500;
perspective:500;
       ⑤变换3D
       父节点添加transform-style：preserve-3D；//正方体必加
 
 -webkit-perspective：900； 梯体