css渐变 动画

渐变

渐变默认方向(从上到下)

1.线性渐变 background

• linear-gradient(颜色1,颜色2);

• 改变渐变方向 在颜色前添加 to right自左到右

• 不仅可以上下左右渐变 还可以有角度的渐变 to right bottom 左上到右下

• 也可以直接在颜色前加 60deg 改变角度

• 可以添加多种颜色用逗号隔开

• 颜色后边可以添加百分比 设置颜色的占比区域 加起来不一定是100%

• 颜色后边也可以添加像素 和百分比按效果一样

• repeating-linear-gradient 重复

2.径向渐变 radial-gradient

• circle 正圆
• circle at top 圆心在最上边

动画

transition: 3s; 过渡

transform:

• translate(值x,y); 位移
• translateX(x); 只用x轴的值
• translateY(y); 只用y轴的值
• scale(0.5); 缩放
• rotate(90deg); 旋转
  • transform-origin: right bottom;改变基准点
• skew(角度x,y); 倾斜

动画帧

run自己定义的名字

@keyframes run{

​ from/~%{从哪里来

​ }

​ to/~%{到哪里去

​ }

​ }