css动画与渐变案例，使用动画和渐变做一个背景动态网页
以下是一个使用CSS动画和渐变制作的背景动态网页的简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 动画与渐变案例</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.gradient-background {
position: relative;
width: 100%;
height: 100%;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body>
<div class="gradient-background">
<!-- 网页内容 -->
</div>
</body>
</html>这段代码创建了一个带有动画渐变背景的简单网页。.gradient-background 类定义了一个渐变背景，并使用@keyframes规则创建了一个无限循环的动画，该动画使背景从左到右平滑移动。这个示例简单明了，展示了如何将渐变和动画结合起来创造一个生动的背景效果。
评论已关闭