帮我用html写一个渐变背景动态
时间: 2023-03-22 20:01:12 浏览: 171
好的,以下是一个使用HTML和CSS实现的渐变背景动画示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>渐变背景动画</title>
<style>
body {
background: linear-gradient(to right, #ff758c, #ff7eb3);
background-size: 400% 400%;
animation: gradient 10s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body>
<h1>这是一个渐变背景动画示例</h1>
<p>这是一个使用HTML和CSS实现的渐变背景动画示例。</p>
</body>
</html>
```
该示例中使用了linear-gradient函数创建了一个渐变背景,并通过background-size设置了渐变背景的大小。然后通过animation属性指定了一个名为gradient的动画,该动画会在10秒内循环播放,并通过keyframes定义了动画的每个阶段所对应的背景位置。最终实现了一个动态的渐变背景效果。
阅读全文