html系列

【html系列】如何实现渐变全屏循环的动态壁纸

在这个教程中，我们将展示如何使用HTML和CSS创建一个充满动感且美观的全屏动态壁纸。这个动态壁纸将包含四种高饱和度、高明度的颜色，并通过线性渐变和平滑动画效果来营造视觉上的流动感。

步骤 1: 创建基本的HTML结构

首先，我们需要创建一个简单的HTML文件。打开你喜欢的代码编辑器（如VS Code），然后新建一个HTML文件，并添加以下基础结构：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，使页面适应不同设备 -->
    <title>Dynamic Gradient Wallpaper</title> <!-- 设置页面标题 -->
</head>
<body>

</body>
</html>

步骤 2: 添加CSS样式

接下来，我们将在 <head>部分添加一些CSS样式来设置背景效果。在 <style>标签中添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
    body, html {
        margin: 0; /* 去除body和html的默认外边距 */
        padding: 0; /* 去除body和html的默认内边距 */
        width: 100%; /* 设置body和html宽度为100% */
        height: 100%; /* 设置body和html高度为100% */
        overflow: hidden; /* 隐藏溢出的内容 */
    }
    #gradientBackground {
        position: absolute; /* 绝对定位背景元素 */
        width: 200%; /* 设置背景宽度为父元素的200% */
        height: 200%; /* 设置背景高度为父元素的200% */
        background: linear-gradient(45deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置线性渐变背景色 */
        animation: gradientAnimation 15s ease infinite; /* 应用动画效果 */
        filter: blur(10px); /* 添加模糊滤镜效果 */
    }

    @keyframes gradientAnimation {
        0% { background-position: 0% 50%; } /* 动画开始时背景位置 */
        50% { background-position: 100% 50%; } /* 动画中间时背景位置 */
        100% { background-position: 0% 50%; } /* 动画结束时背景位置 */
    }
</style>

这些CSS样式做了几件重要的事情：

  • body, html设置了页面的基本属性，去除默认的边距和填充，并确保它们占据整个屏幕。
  • #gradientBackground是一个绝对定位的div，它的宽度和高度都被设置为父元素的两倍，以便在移动背景时不会出现空白区域。
  • background属性定义了一个从左上到右下的45度角的线性渐变，使用了四种鲜艳的颜色。
  • animation属性应用了一个名为 gradientAnimation的关键帧动画，持续时间为15秒，无限循环播放。
  • filter: blur(10px)给背景添加了一个轻微的模糊效果，使其看起来更加柔和。

步骤 3: 创建背景元素

最后，在 <body>标签中添加一个用于显示渐变背景的 <div>元素：

1
<div id="gradientBackground"></div>

完整代码示例

以下是完整的HTML代码，你可以将其复制并保存为 .html文件，然后在浏览器中打开以查看效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，使页面适应不同设备 -->
    <title>Dynamic Gradient Wallpaper</title> <!-- 设置页面标题 -->
    <style>
        body, html {
            margin: 0; /* 去除body和html的默认外边距 */
            padding: 0; /* 去除body和html的默认内边距 */
            width: 100%; /* 设置body和html宽度为100% */
            height: 100%; /* 设置body和html高度为100% */
            overflow: hidden; /* 隐藏溢出的内容 */
        }
        #gradientBackground {
            position: absolute; /* 绝对定位背景元素 */
            width: 200%; /* 设置背景宽度为父元素的200% */
            height: 200%; /* 设置背景高度为父元素的200% */
            background: linear-gradient(45deg, #ff7e5f, #feb47b, #86a8e7, #91eae4); /* 设置线性渐变背景色 */
            animation: gradientAnimation 15s ease infinite; /* 应用动画效果 */
            filter: blur(10px); /* 添加模糊滤镜效果 */
        }

        @keyframes gradientAnimation {
            0% { background-position: 0% 50%; } /* 动画开始时背景位置 */
            50% { background-position: 100% 50%; } /* 动画中间时背景位置 */
            100% { background-position: 0% 50%; } /* 动画结束时背景位置 */
        }
    </style>
</head>
<body>
    <div id="gradientBackground"></div> <!-- 创建用于显示渐变背景的div元素 -->
</body>
</html>

现在，你应该能够在浏览器中看到一个不断变化的动态渐变背景墙纸了！你可以根据自己的喜好调整颜色、动画时间和模糊程度，创造出属于你自己的独特视觉体验。