由于这些内容用的比较少, 还有很大的补充完善没有做
渐变色
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. 先定义动画
'
@keyframes move{
0%{
width: 666px;
}
100%{
width: 222px;
}
}
'
2. 再使用 (调用) 动画
'div{
animation-name: move;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
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网格布局