本文最后更新于 2024-05-03,文章内容可能已经过时。

🎈前言

点赞 + 收藏 = 后期方便查找!

先看看最终效果

这个效果非常简单,只要看完实现原理应该就是有思路了。

🎗️原理

  1. 规定好容器尺寸

  2. 设置渐变背景: background: linear-gradient(...) 自己设置角度和颜色吧

  3. 设置背景尺寸比容器大几倍:background-size: 600% 600%;

  4. 搞个循环动画,控制背景移动:background-position

👊示例

<!-- 容器 -->
<div class="gradient"></div>
<p><style>
.gradient {
/* 设置容器尺寸 - 原理1 <em>/
width: 400px;
height: 400px;
/</em> 背景渐变色 - 原理2 <em>/
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
/</em> 背景尺寸 - 原理3 <em>/
background-size: 600% 600%;
/</em> 循环动画 - 原理4 */
animation: gradientBG 5s ease infinite;
}</p>
<p>/* 动画,控制背景 background-position */
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>