css高级用法

CSS高级用法

核心知识点

2D转化及相关属性[重要]

基本语法: transition:all .5;[过度动画]
旋转:
transform:rotate(deg/度/) 正顺负逆默中心
tranform-origin/改变旋转中心点/ 绕点旋转
具体坐标 |
缩放:
tranform:scale(x (w), y (h)); 倍数
scale()中设置的值表示的是一个倍数,没单位
scale()中设置的值如果大于0且小于1, 缩小
scale()中设置的值大于1, 放大
scale()中设置的值等于1, 不变
scale()中设置的值等于0,该宽高等于0
scale()中设置的值可以设置一个,宽和高的倍数
scale()中不能设置负数
注:如果页面中元素要同时设置多个tranform属性的时候,tranform属性要合写[防层叠]
位移:
x轴:水平,左向右为正
y轴:垂直,上向下为正
tranform:tranlate(x,y);
中第一个值代表水平方向位移,第二个值代表垂直方向位移

补充:线性渐变
background-image: linear-gradient( /* 渐变的方向 / to right, #34c2aa, #6cd557 / 使用角度的方式渐变 / / 135deg, red, blue */ );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

###  **3D转换**

```css

语法:
   tranform:tranlateX(值) /*x必须大写*/可以设置百分比
   tranlateX只能让元素沿着水平方向位移
           可以设置负数,沿水平相反的方向位移(从右往左)
           可以设置百分比,百分比是相对于当前元素的宽度
   Y
   
   Z
   prespective: 透视在浏览器中出现近大远小的效果  (透视:推荐值-->600--1000)
   prespective属性设置:给tranform属性的父元素添加
   总结:
   
   
   旋转:
       加个坐标轴
       x  正往我这边  
      Y 正往右  开门
      z 于2d转换效果一样
   总结:如果元素沿着x轴旋转,x轴默认中间位置

   3d改旋转轴 tranSform-origin
             tranSform-origin:left;轴
   缩放:
   tranSporfm: scale()
   
   转化样式平面转立体
   transform-style:preserve-3d;
   

animation属性

animation–动画自动播放 ,动画次数可以无限次执行

transition— 动画需用户动作,动画随着用户动作的取消

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@keyframes name {
       /*设置动画在开始时候的样式*/
       from {
               
            }
            /* 动画开始后的一个效果 */
            to {
               
            }
}
animation-name:调用动画名称
animation-dyration:设置动画时间
animation-iteraton-count:设置动画次数 infinite;无限次执行
animation-direction:alternate; 逆播
animation-timing-function:;速度默认值ease | linear匀速
ease-in 加速 | ease-out 减速 |ease-in-out
animation-fill-mode:forwards;让动画在结束位置停止[条件不能设置无限次数]
animation-delay:设置动画延迟时间

animation复合属性:
1.设置  animation -name
2 设置 animation-duration