CSS背景渐变动画

今天就来简单的聊聊这个有趣的css。

首先，本来是动画的，可是。。。。打脑壳

没有视频的权限，害！！！终究是一个人抗下了所有！
展示预览看不了就很烦，算了

掏出我的作案工具 HBuilder


这个没有特别的要求哈，你喜欢那个软件就用那个，做人嘛，开心最重要了。
老规矩，创建文件，系统生成一个html模板

更多精彩图片 请登录

插入style就开干

更多精彩图片 请登录

老样子，设置边距

更多精彩图片 请登录

因为动画是全屏的，所以就给body和html设置宽高为100%

更多精彩图片 请登录

然后给他们设置背景属性为渐变色，角度为-45，也就是右下至左上

更多精彩图片 请登录

更多精彩图片 请登录

这个颜色和角度你们可以自己调，更具个人喜欢选
四中颜色全堆在一起，显然达不到我们要的效果
所以我们要给每个渐变的颜色设置宽高，让他们有自己的地盘，这边就直接用背景大小属性就好了

更多精彩图片 请登录

更多精彩图片 请登录

背景设置完了，接着就是css动画
然后就要绑定一个动画，并且设置动画持续时间和动画的运行方式

更多精彩图片 请登录

还是没什么反应，因为我们还没有创建动画

更多精彩图片 请登录

开始新建动画，名称要和上面绑定的一样

更多精彩图片 请登录

先定好动画的几个部分，然后渐变颜色多的话可以分的细一点
我这边是三个部分

更多精彩图片 请登录

首先构思一下渐变动画的原理，就是一个颜色切换的另一个颜色，而且他们中间要融合
融入这个我们已经用背景渐变把他解决了，接下来要处理的就是让他切换
这个时候可以用到background-position属性来控制背景的位置，从而达到切换的效果
之前我们给没一个颜色都定义了宽高为100%，由于我们屏幕只有一个100%，所以当显示一个的时候，还有三个在屏幕外面
切换的目的就是把现在的换走，把后面的排队过来
确定好思路这就开整
首先设置0%的动画，背景的位置为x方向0%，y方向50%
意思是往上退出去一半，那么后面的就跟着过来

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

接着第二部就是50%，前面两个颜色往右边退出屏幕，后面的颜色往上走50%，也就是一半

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

最后就是100%，这一部与一开始的0%衔接，不然就会造成动画不流畅
第三颜色左退出，并且先向上50%，第四颜色跟上
位置还是和0%的一样，因为要衔接

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

更多精彩图片 请登录

本期难点主要是背景位置的设置，思路清楚就非常容易了
颜色可以自己选择角度，动画步骤看个人能力，如果能自己写出来，那说明对背景位置的定义已经很清楚了

附上源代码：

更多精彩图片 请登录

很有帮助，感谢分享！