[html] 动态炫彩渐变背景

最新推荐文章于 2025-01-20 14:39:57 发布

tan 91

最新推荐文章于 2025-01-20 14:39:57 发布

阅读量2k

点赞数 1

文章标签： html 前端 javascript

ZXW-NUDT

本文链接：https://blog.csdn.net/ZXW_NUDT/article/details/134362404

版权

本文展示了如何使用ZXW-NUDT的HTML和CSS代码创建一个动态炫彩渐变背景，通过线性渐变和关键帧动画实现全屏背景效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话不多说，直接上源码

<!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>