使用css实现一个动态背景 - Riesenzahn - 沸点 - 掘金

4月前

使用css实现一个动态背景
实现一个动态背景可以通过 CSS 动画或渐变配合 `@keyframes` 来完成。以下是一个简单的示例，使用 CSS 动画创建一个动态渐变背景。

### 示例代码

```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态背景</title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
overflow: hidden; /* 防止出现滚动条 */
}

/* 动态背景样式 */
.dynamic-background {
height: 100%;
background: linear-gradient(270deg, #ff7e5f, #feb47b);
background-size: 400% 400%;
animation: gradientAnimation 15s ease infinite; /* 动画设置 */
}

/* 动画关键帧 */
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;

展开

今天学到了

赞过