html+css 动态渐变背景

html-css024

html+css 动态渐变背景,第1张

先给背景设置了渐变颜色并且旋转一定角度，实现斜着的渐变效果。

接下来把背景放大500%，然后设置了一个15秒的动画，动画infinite无限循环。

动画部分就是对背景进行一个定位，实现渐变颜色的动态切换。

html结构

css样式

gitee地址： siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)

要得上面的线性渐变效果，我们这样去定义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,...