HTML+CSS 纯css打造炫酷背景动画效果

先上效果

（实际是动态动画，图是静态而已）

---

🌟 在网页设计的世界里，背景不仅仅是页面的衬托，更是一种强有力的视觉语言。CSS酷炫背景渐变动画能够为网站带来生动的视觉效果，提升用户的审美体验。本文将深入探讨如何运用CSS的强大功能，创建引人入胜的背景渐变动画。

---

完整代码 

HTML：

<div class="text">
    CSS 渐变酷炫背景动画
  
</div>

CSS代码:

body{
            height: 100vh;
            width: 100vw;
            margin: 0;
            padding: 0;
            font-family: "montserrat";
            background-image: linear-gradient(45deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
            background-size: 400%;
            animation: bganimation 15s infinite;
        }
 
        .text{
            color: white;
            text-align: center;
            text-transform: uppercase;
            padding: 30vh;
            font-size: 22px;
        }
 
        @keyframes bganimation {
            0%{
                background-position: 0% 50%;
            }
            50%{
                background-position: 100% 50%;
            }
            100%{
                background-position: 0% 50%;
            }
        }

🌟 背景渐变动画的效果是有以下几个关键点：

1. 背景渐变: 你使用了linear-gradient函数来创建了一个线性渐变背景。这个渐变从一种颜色平滑过渡到下一种颜色。在你的代码中，有五种颜色：#2c3e50（蓝色）、#27ae60（绿色）、#2980b9（另一种蓝色）、#e74c3c（红色）和#8e44ad（紫色）

2. 背景大小: background-size: 400%; 这句话让背景渐变的大小扩展到原始尺寸的四倍。这样，即使在动画移动的时候，背景也有足够的内容来显示渐变效果，而不会出现空白。

3. 动画关键帧: @keyframes bganimation 定义了动画的关键帧。动画开始时（0%），背景位置在左边（background-position: 0% 50%;）。当动画进行到一半时（50%），背景位置移动到了右边（background-position: 100% 50%;）。

4. 最后，动画结束时（100%），背景位置又回到了左边。

动画应用: animation: bganimation 15s infinite; 这句话把定义好的bganimation动画应用到body元素的背景上。动画持续时间为15秒，并且设置了infinite，意味着动画会无限次地重复。

---

🌟 综上，效果实现了, 后续有什么想要的欢迎大家留言，也可以加喔微信, 18634371151,欢迎~

🌟 往期精彩，可以关注博主看左侧专栏，一定有你需要的！！！

🌟 关注耀南.，探索更多精彩的动画效果！🚀