1.渐变
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
1.1线性渐变
1.1.1基础线性渐变
- 需设置两个及两个以上的颜色
- 颜色之间用
,间隔
- 颜色会平均分配
- 根据设置颜色的顺序，进行渐变
div{
background: linear-gradient(red,black);
}
1.1.2进阶线性渐变（可控制每个颜色的渐变区域）
- 距离跟随在颜色后面,可以是
px或%
- 如：第一个距离 和 第二个距离是重叠区域，将没有过渡效果
- 最后一个颜色值，会填满后续所有距离
- 如果第一个数值不是从
0px开始，则从你设置的位置才开始进行颜色过渡
background: linear-gradient(red 20%,black 30%);
1.1.3高级线性渐变（可设置渐变方向） - 默认：从上至下
- 关键词
- 写在颜色前面
,间隔
to 指向，后面跟上指定方向left、right、top、bottom 随机组合
to left 从 右 至 左to right 从 左 至 右to top 从 下 至 上to bottom从 上 至 下 - 默认to left top 从 右下 至 左上to left bottom 从 右上 至 左下to right top 从 左下 至 右上to right bottom 从 左上 至 右下
background: linear-gradient(to left top,red 150px,black 300px);
- 指定角度（单位：deg）
0deg 对应的是 to top从 下 至 上，也就是180deg- 角度正负
background: linear-gradient(90deg,red 150px,black 300px);
1.1.4终极线性渐变（重复线性渐变）
用来写方虚线，真是极好的
- repeating-linear-gradient() - 重复线性渐变
div{
width: 720px;
height: 300px;
background: repeating-linear-gradient(0deg,red 0px,red 50px,black 50px ,black 100px);
}
1.2径向渐变
1.2.1基础径向渐变
- 需设置两个及两个以上的颜色
- 颜色之间用
,间隔
- 颜色会平均分配
- 根据设置颜色的顺序，进行渐变
background: radial-gradient(red,black);
1.2.2进阶径向渐变
- 距离跟随在颜色后面,可以是
px或%
- 如：第一个距离 和 第二个距离是重叠区域，将没有过渡效果
- 最后一个颜色值，会填满后续所有距离
- 如果第一个数值不是从
0px开始，则从你设置的位置才开始进行颜色过渡
- 数值是圆的水平半径，垂直半径跟随水平自动计算
background: linear-gradient(red 20%,black 30%);
- 可以指定形状 - 不同的形状，垂直半径的计算方式不一样
- 添加在颜色前
- 以
,进行间隔
- ellipse 椭圆形 ，circle 圆形
background: radial-gradient(circle,red 250px,black 20px);
- 还可以直接输入垂直、水平的半径，更好的控制圆的形状
- 具体数值
如果设置的值，小于颜色后面的半径值，则参考颜色后半径
background: radial-gradient(100px 100px,red 50px,black 100px,green);
- 关键词（没啥用）
farthest-corner 半径是圆心到最远角farthest-side 半径是圆心到最远边closest-corner 半径是圆心到最近角closest-side 半径是圆心到最近边
background: radial-gradient( farthest-side at left top ,red 50px,black 50px);
2.动画
2.1CSS3 transition 过渡
控制一段时间内属性的值如何变为另一个值，使属性的值逐渐变化，不会太突兀
transition-duration 过渡持续时间 （单位：s 秒 / ms 毫秒）
transition-property 想要执行过渡的样式
- 默认 all
- 只支持数值类型的值，而且，必须是同一个样式，从一个数值，过渡到另一个样式
transition-delay 过渡延迟时间（单位：s 秒 / ms 毫秒）
transition-timing-function 过渡执行动画
linear 整个过程保持相同的速度ease 慢速开始，然后加速，在慢下来，结束时特别慢（默认值）ease-in 慢速开始，然后加速ease-out 快速开始，然后减速ease-in-out 与ease类似，中间较快，两端很慢但不同速cubic-bezier 三次方贝塞尔曲线cubic-bezier(x1,y1,x2,y2)
https://cubic-bezier.com/#.17,.67,.83,.67
复合写法：
transition：property duration timing-function delay；
transition: property duration timing-function , property duration timing-function;
在过渡中，持续时间和延迟值的顺序很重要，解析为时间的第一值设定的是持续时间（执行时间在前，延迟时间一定在后）
2.2 CSS3 transform 变换
2.3 CSS3 animation 动画
- animation-name 绑定到选择器的 keyframe 名称
- keyframes 规定动画
@keyframes name {selector {//css样式;}}
- name 必须，定义动画名称
- selector 必须，动画时长百分比
- 0-100%
- from（与 0% 相同） to（与 100% 相同）
@keyframes mymove{
0% {top:0px; background:red;}
100% {top:200px; background:yellow;}
}
animation-duration 完成动画所花费的时间，以秒或毫秒计
animation-timing-function 规定动画的速度曲线
- linear 动画从头到尾的速度是相同的。
- ease 默认。动画以低速开始，然后加快，在结束前变慢。
- ease-in 动画以低速开始。
- ease-out 动画以低速结束。
- ease-in-out 动画以低速开始和结束。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay 动画开始之前的延迟时间，默认值是0
animation-iteration-count 动画播放的次数
- n 定义动画播放次数的数值。
- infinite 规定动画应该无限次播放。
animation-direction 是否应该轮流反向播放动画
- normal 默认值。动画应该正常播放。
- alternate 动画应该轮流反向播放。
animation-play-state 规定动画是否正在运行或暂停。默认是"running"。
animation-fill-mode 规定对象动画时间之外的状态
- Forwards 规定动画运动完成之后，停留在最后一帧的状态
- backwards 在动画播放之前，动画延时的这段时间里直接使用关键帧里面的第一帧样式