随机动态背景

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

今天来使用css background-image的一个放射性渐变属性，生成一个由多个小圆组合而成的动态随机背景。

实现

code.juejin.cn/pen/7144744…

实现过程

radial-gradient函数

首先我们要先了解到css中的 radial-gradient 这个函数，具体的可以去看一下网上的介绍，这里不做过多描述。

CSS radial-gradient() 函数

然后我们就能够利用这个函数来获得一个放射性渐变的圆形，

定位

然后通过定位的方式将多个不同颜色的圆分布到各个位置，

我们就能够获得一张比较完美的背景，然后在对这个背景做一点的模糊处理，让小圆之间的边界看起来不是那么的僵硬。

这点我们可以用伪元素来实现：

body::after {
  content: "";
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

动画

在定义好了多个圆以后，我们就要让我们的动画动起来，动起来也很简单，无非就是在动画进行的过程当中，动态的去改变每一个圆的大小和定位，这样就能够做到让背景动起来。

@keyframes animation {
  0%,
  100% {
    background-size: 180rem 180rem, 130rem 130rem, 90rem 90rem,
      110rem 110rem, 90rem 90rem;
    background-position: -80rem -80rem, 60rem -30rem, 10rem 10rem,
      -30rem -10rem, 50rem 50rem;
  }
  25% {
    background-size: 100rem 100rem, 90rem 90rem, 100rem 100rem, 90rem 90rem,
      60rem 60rem;
    background-position: -60rem -90rem, 50rem -40rem, 0rem -20rem,
      -40rem -20rem, 40rem 60rem;
  }
  50% {
    background-size: 130rem 130rem, 110rem 110rem, 130rem 130rem,
      60rem 60rem, 130rem 130rem;
    background-position: -50rem -70rem, 40rem -30rem, 10rem 0rem,
      20rem 10rem, 30rem 70rem;
  }
  75% {
    background-size: 90rem 90rem, 90rem 90rem, 100rem 100rem, 90rem 90rem,
      70rem 70rem;
    background-position: -50rem -40rem, 50rem -30rem, 20rem 0rem,
      -10rem 10rem, 40rem 60rem;
  }
}

生成随机颜色并且定时改变

接着使用js随机数来获取一个0-255的随机数，并且三个一组组合起来，把每一个小球的颜色都改变为通过函数随机生成的，并且设定一个定时器，在每过一段时间之后，动态的改变每一个小球的颜色，这样来做到颜色的动态化。

function getRandomBg() {
    const randomBg = `
    background-image: radial-gradient(
      closest-side,
      rgba(${randomColor()}, 1),
      rgba(${randomColor()}, 0)
    ),
    radial-gradient(
      closest-side,
      rgba(${randomColor()}, 1),
      rgba(${randomColor()}, 0)
    ),
    radial-gradient(
      closest-side,
      rgba(${randomColor()}, 1),
      rgba(${randomColor()}, 0)
    ),
    radial-gradient(
      closest-side,
      rgba(${randomColor()}, 1),
      rgba(${randomColor()}, 0)
    ),
    radial-gradient(
      closest-side,
      rgba(${randomColor()}, 1),
      rgba(${randomColor()}, 0)
    );;
            `;
    return randomBg;
  }

  function randomBgImg() {
    clearInterval(randomTimer);

    const el = document.createElement("div");
    el.id = "bg";

    el.style.cssText = getRandomBg();
    document.body.appendChild(el);

    function setBg() {
      setTimeout(() => {
        let randomBg = getRandomBg();
        el.style.cssText = randomBg;
        console.log(randomBg);
      }, 1000);
    }

    randomTimer = setInterval(setBg, 3000);
  }
  randomBgImg();

到这里就可以通过js来使得背景不断地发生改变了。

总结

本文记录了一种随机的放射性小球背景生成方案，虽然生成出来的背景图可能会因为随机颜色的搭配导致美观程度相差很大，但也算是提供了一种随机颜色背景的生成方法。