html+css 动态渐变背景

html-css011

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

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

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

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

html结构

css样式

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

有两种实现的方法。第一种就是最常用的插入背景图片（做个渐变图就可以了） 第二种就是在<body>内 加入 style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#7CBE42', endColorStr='#84C34A', gradientType='0')" 演示： www.rockshop.cn/new/images/wenwen.html

HTML中只能实现背景背景渐变。

图片不能实现渐变，图片只能通过CSS滤镜实现：灰度，模糊，褐色，曝光，反色，色相旋转，阴影，透明，改变饱和度，改变对比度，这些效果。

要真正实现图片渐变，只能用Photoshop来修改图片，然后把图片作为HTML文件的背景。