需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：。
body {
animation: change 3s linear 0s infinite
}
@keyframes change {
0% {color: #333}
50% {color: #f60}
100% {color: #f00}
}
3、浏览器运行index.html页面，此时字体颜色会随着时间的变化而自动变化。
要得上面的线性渐变效果，我们这样去定义CSS3样式：background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa)/* Firefox */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1,...先给背景设置了渐变颜色并且旋转一定角度，实现斜着的渐变效果。接下来把背景放大500%，然后设置了一个15秒的动画，动画infinite无限循环。
动画部分就是对背景进行一个定位，实现渐变颜色的动态切换。
html结构
css样式
gitee地址： siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)
