[html] 动态炫彩渐变背景

废话不多说,直接上源码

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 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼7 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093311 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang135832 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning32 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人42 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00143 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙