HTML入门DAY15

背景渐变

1.线性渐变
background：linear-gradient(颜色1，颜色2)普通渐变
background：linear-gradient(颜色1 %，颜色2 %)设置渐变比例
background：linear-gradient(to 方向， 颜色1，颜色2)设置渐变方向
background：linear-gradient(to 方向一 方向，二颜色1，颜色2)设置对角渐变
background：linear-gradient( *deg ，颜色1，颜色2)设置渐变角度
如果渐变比例百分比值是一样的，就会是明确分界的两种颜色；
2.径向渐变
background：redial-gradient(颜色1，颜色2)普通渐变
background：redial-gradient(颜色1 %，颜色2 %)设置渐变比例
background：redial-gradient(ellipse椭圆或者circle正圆， 颜色1，颜色2)设置普通图形
3.重复渐变
重复线性渐变 background:repeating-linear -gradient(颜色1 %，颜色2 %)
重复径向渐变 background:repeating-radial-gradient(颜色1 %，颜色2 %)

过度

让值可以数字化的属性变化 ，慢慢进行
语法：
transition:过度的属性1 执行的时间 延迟的时间 变化的曲线， 过度的属性2 执行的时间 延迟的时间 变化的曲线
说明：变化的曲线linear代表匀速变化
注意：如果要实现过度，必须保证属性值可以数字话。display属性不能实现渐变

动画

1.定义动画
@keyframes 动画名{
0%{
开始状态的样式
}
*%{
中间状态的样式
}
100%{
结束状态·的样式
}
}
2.绑定、执行、调用动画
animation：动画名 动画执行时间 延迟时间 执行次数 变化曲线 变化的方向；
执行的次数： infinite是无穷次
变化的曲线： linear是线性
变化的方向：alternate是交替方向执行 。【from-to ，to-from】
animation-play-sate:pused 暂停|runing 执行。
　animation 可以用 name 设置动画的名称，用 duration 设置动画完成的周期，用 timing-function 设置动画的速度曲线，delay 设置动画什么时候开始，iteration-count 设置动画播放的次数，direction 规定下一个周期是否逆向的播放，play-state 动画是否正在进行或者暂停，fill-mode 设置动画停了之后位置什么状态

transition 用 property 去设置过渡效果的属性名称，duration 设置过渡效果的周期，timing-function 规定速度效果的速度曲线，delay 设定过渡效果什么时候开始；
　　区别：

1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；

2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；

3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；

4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；

5、在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；

这篇好文章是转载于：学新通技术网