h5网页背景图渐变动画
时间: 2023-11-12 09:09:15 浏览: 183
HTML5交互式渐变背景动画特效
以下是一个使用CSS实现的h5网页背景图渐变动画示例:
HTML代码:
```
<div class="bg"></div>
```
CSS代码:
```
.bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, #00c6ff, #0072ff);
animation: bg-animation 10s ease infinite;
}
@keyframes bg-animation {
0% {
background-image: linear-gradient(to bottom, #00c6ff, #0072ff);
}
50% {
background-image: linear-gradient(to bottom, #0072ff, #00c6ff);
}
100% {
background-image: linear-gradient(to bottom, #00c6ff, #0072ff);
}
}
```
解释:
- 使用一个div元素作为背景图层;
- 设置背景图层为固定定位,占满整个视窗;
- 设置背景图层的背景图为线性渐变,从上到下渐变,颜色由蓝色渐变到浅蓝色;
- 使用animation属性为背景图层添加动画效果;
- 定义一个名为bg-animation的关键帧动画,分别在0%、50%和100%时设置渐变颜色,使背景颜色在蓝色和浅蓝色之间循环渐变;
- 设置动画时长为10秒,缓动方式为ease,循环次数为无限。
阅读全文