关于前端:纯css实现动态渐变背景一分钟学会

🎈前言

点赞 + 珍藏 = 学会了

🐱‍💻在线展现

[🐱‍👓代码仓库]()

先看看最终成果

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

🎗️原理

1. 规定好容器尺寸
2. 设置突变背景：background: linear-gradient(...) 本人设置角度和色彩吧
3. 设置背景尺寸比容器大几倍：background-size: 600% 600%;
4. 搞个循环动画，管制背景挪动：background-position

👊入手实现

间接上代码，对照着 『原理』 和 正文 置信你肯定能学废。

<!-- 容器 -->
<div class="gradient"></div>

<style>
  .gradient {
    /* 设置容器尺寸 - 原理 1 */
    width: 400px;
    height: 400px;
    /* 背景渐变色 - 原理 2 */
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    /* 背景尺寸 - 原理 3 */
    background-size: 600% 600%;
    /* 循环动画 - 原理 4 */
    animation: gradientBG 5s ease infinite;
  }

  /* 动画，管制背景 background-position */
  @keyframes gradientBG {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
  }
</style>

🤯奇思妙想

本例如果不必动画自动播放，能够联合鼠标挪动做交互参考系。

通过鼠标以后所在位置管制背景色的突变成果。

这大略也是视差成果的一种吧，能够联合《视差特效的原理和实现办法》的原理实现。

点赞 + 关注 + 珍藏 = 学会了