CS3 基础

由于这些内容用的比较少, 还有很大的补充完善没有做

渐变色

1. background: linear-gradient (起始方向, color1, color2, ...)
2. background: -weblit-linear-gradient (left, red, blue);   ---> 默认从上到下, 从color1到color2
3. background: -weblit-linear-gradient (left top, red, blue);   -->从左上到右下
4. repeat-linear-gradient;   ---> 重复的线性渐变
5. background: radial-gradient(center,size,start-color,last-color);   ---> 径向渐变

过渡

1. transition: 变化的属性 /花费时间 /运动曲线 /何时开始;
2. 如果想要写多个属性, 利用逗号进行分割 -->transition: width .5s, height .5s;

动画

1. 先定义动画
        '/* 动画名称 move */
          @keyframes move{
    
    
            0%{
    
    
              width: 666px;​
            }
            100%{
    
    
              width: 222px;
            }
          }
'
2. 再使用 (调用) 动画
          'div{
    
    
            /* 调用动画 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
            /* 重复次数  infinite --无限*/
            animation-iteration-count: infinite;
            /* 是否反方向播放 默认normal*/
            animation-direction: alternate;
            /* 动画结束后的状态, 默认的是 background回到起始位置, forwards停留再结束位置 */
            animation-fill-mode: forwards;
          }'

3. 动画简写属性
          animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否为反方向 动画结束的状态
          animation: myfirst 5s liner 2s infinite alternate;
          steps(步长) --->速度曲线设置时间函数中的间隔数量  (一格一格的播放, 奔跑效果)

3D转化

1 三维坐标系
    x轴 -->水平向右    ---> X右边是正值, 左边是负值
    y轴 -->垂直向下     ---> Y下面是正值, 上面是负值
    z轴 -->轴水平向右   ---> Z往外面是正值, 往里面是负值

2 主要知识点
    3D位移: transform: translate3d(x,y,z) /  translateZ/X/Y();
    3D旋转: transform: rotate3d(x,y,z)
    3D透视: perspective   --->让画面呈现3D的感觉, 透视  (写在被观察元素的父盒子上面)
    3D呈现: transform-style: preserve-3d; 控制子元素是否开启三维立体环境, 默认flat不开启  (代码写给父级影响的是子盒子)

Grid网格布局​