层级：z-index:10; 大的在上面（可以为负）
动画样式：渐变过渡动画
线性渐变
background: linear-gradient(red, blue); 默认从上到下可多个颜色
background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); 透明色渐变
background: linear-gradient(to bottom right, red , blue); 到右下
background: linear-gradient(180deg, red, blue); 角度方向
background: repeating-linear-gradient(red, yellow 10%, green 20%); 重复渐变
径向渐变
background: radial-gradient(red, green, blue);
background: radial-gradient(red 5%, green 15%, blue 60%);
background: radial-gradient(circle, red, yellow, green); 圆形
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
farthest- corner 尺寸
background: repeating-radial-gradient(red, yellow 10%, green 15%); 重复渐变
2D
transform:rotate(60deg); 转动60度
transform-origin:left top; 旋转中心左上 0px 0px center
transform: translate(100px,100px); 移动
transform: scale(2,3); 缩放倍数
transform: skew(20deg,30deg); X:20 Y:30 Y可不写
transform: skewX(20deg); 沿X轴y偏转20度 skewY
transform:matrix(2,0.5,-0.5,0.866,0,0);x放大,倾斜,倾斜,y放大,x偏移,y偏移
3D
transform-style:preserve-3d; 3D显示 div
transform: perpective(800px) rotateX(0deg); 透距800px 设0防跳变 div
transform: rotateX(180deg) [translateZ]; 沿X轴转 rotateY div img
backface-visibility:hidden; 背面不可见 div img
过渡
.tiao_title{transition: right 0.5s;}
.tiao:hover .tiao_title{right: 97px;}
transition:width 2s; 宽变动两秒 all 2s linear
:hover{300px;} 光标宽变成300px
transition: width 2s, height 2s, transform 2s; 宽高转换
:hover{ 200px; height:200px; transform:rotate(180deg);
宽变200 高变200 转动180度
动画
animation:myfirst 5s linear 2s infinite alternate forwards;
动画时间速度延迟次数倒放终状态
@keyframes myfirst{0% {background:red; left:0px; top:0px;} 定义动画
25% {background:yellow; left:200px; top:0px;}}
动画展示进度百分比from:0% , to:100% 对应颜色位置
position:relative; 位置:相对自身