借鉴一个腾讯 Tdesign UI 的Animation CSS模糊背景动画

一旦有了感情，就窝囊得不行，你说要敬往事一杯酒，再爱也不回头。实际就算你醉到黄昏独自愁，如果那人伸出手，你还是会跟他走

震惊！在1月17日早晨枫某在上班途中，既然脑洞打开想做CSS渐变动画；起因居然是左脚迈入大门，当然要是成功做出一个效果好的，显然可以减小程序体积，万万没想到一段话用了这么多个“然”

起初

途中看到一个Vanta.js 3D动画，于是访问了官网浏览一番；发现小程序上若用代码去实现一些东西，可以替换图片减少体积效果，由于小程序不一定兼容第三方JS库，或者想更简单的实现效果可以用CSS渐变背景代替，能动态变化最好

上图应该是我们常见的方式，大众，简单，缺乏了一丢丢艺术感

记得在腾讯 Tdesign UI 的Animation CSS模糊背景动画非常吸引人，而且还是会动的

我们看下他的Animation 轨迹

韭菜

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .item {
        background: #fff;
        border-radius: 6px;
        height: 422px;
        width: 422px;
        overflow: hidden;
        margin: auto ;
        position: relative;
        transition: transform .24s cubic-bezier(.38, 0, .24, 1), box-shadow .24s linear;
      }

      .item:hover {
        box-shadow: 0 6px 30px 5px #0000000d, 0 16px 24px 2px #0000000a, 0 8px 10px -5px #00000014;
        transform: translateY(-4px);
      }

      .mask {
        animation: maskRun3 20s linear infinite;
        background: radial-gradient(50% 50% at 50% 50%, rgba(7, 193, 96, .1) 0, rgba(7, 193, 96, 0) 100%);

        border-radius: 100%;
        filter: blur(50px);
        height: 600px;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 600px;
        z-index: 10;
      }

      @keyframes maskRun3 {
        0% {
          transform: translate3d(-25%, -25%, 0)
        }

        25% {
          transform: translate3d(60%, -25%, 0)
        }

        50% {
          transform: translate3d(0, 25%, 0)
        }

        75% {
          transform: translate3d(60%, 25%, 0)
        }

        to {
          transform: translate3d(-25%, -25%, 0)
        }
      }

      html,
      body {
        background-color: #f5f5f5;
      }
</style>
  </head>
  <body>
    <div class="item miniapp">
      <div class="mask"></div>
    </div>
  </body>
</html>