[html] 动态炫彩渐变背景

废话不多说，直接上源码

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ZXW-NUDT: 动态炫彩渐变背景title>
        <style>
            body, html {
                height: 100%;
                margin: 0;
            }

            .gradient-background {
                /* 设置渐变背景 */
                background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

                /* 使背景全屏 */
                height: 100%; 

                /* 添加背景渐变动画 */
                animation: gradientBG 15s ease infinite;
                background-size: 300% 300%;
            }

            /* 定义背景渐变动画 */
            @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>

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
35
36
37
38
39
40
41
42
43
44
45

相关阅读:
Linux centos7.0搭建Java开发环境(保姆级教程)
计算机网络常识
java计算机毕业设计快滴预约平台源码+mysql数据库+系统+lw文档+部署
flink中cpu消耗的大户-序列化和反序列化
多线程设计模式【线程安全、 Future 设计模式、Master-Worker 设计模式】(一)-全面详解（学习总结---从入门到深化）
C++ 统计程序运行时间
前端获取资源的方式(ajax、fetch)及其区别
（附源码）计算机毕业设计SSM基于的服装商城系统
Wpf 使用 Prism 实战开发Day02
概论_第2章随机变量及其概率分布__离散型随机变量之二项分布

原文地址：https://blog.csdn.net/ZXW_NUDT/article/details/134359315