html+css 动态渐变背景

html-css010

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

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

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

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

html结构

css样式

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

css的背景颜色设置为无色步骤如下:

1、新建一个html文件,需要设置宽度250px和高度140px,以及背景色填充为红色。

2、然后在父级DIV中插入一个子DIV,定义它的宽200px,高90px,以及背景色。

3、然后添加一个无色(透明)的代码(opacity:0.6)。

4、在图层的上方,有个不透明度,设置为60%。

5、把刚才的背景色和无色代码删除,换个代码【background-color:rgba(255,255,255,0.6)】。

6、其中255,255,255就是PS中的拾色器里的数值。这样,css的背景颜色就为无色了。

利用颜色覆盖函数和动态代码来进行动态颜色设置。

首先,直接在body标签上设置背景图片,利用keyframes和animation属性来实现添加动画效果,利用animation属性设置动画名称、播放时间、播放次数。利用keyframes定义每一帧动画,然后就设置完成了。

所谓CSS,层叠样式表,网页实际上是一个多层结构,通过CSS可以分别为网页的每一层来设计样式,而我们最终能看到的只是网页的最上面一层,总之就是CSS是用于设置网页中元素的样式。