实现思路

使用js动态生成span,给这个元素设置宽度、高度和背景是一只兔子,同时使用css设置animation和transform让元素动起来.

实现过程

用一个html容器放置大量的span元素,再使用js的document.createElement动态生成span,因为需要大量生成,我们使用setinterval以时间间隔极小的执行生成函数.且每个气泡的位置是不同的,所以需要设置元素为绝对定位,位置的数值应该是随机数,包括width和height也是随机数生成的.

// html
 <div>
 </div>
// js
 function createBubble() {
      const section = document.querySelector('div')
      const createElement = document.createElement('span')

      let size = Math.random() * 60
      createElement.style.width = 20 + size + 'px'
      createElement.style.height = 20 + size + 'px'
      createElement.style.left = Math.random() * innerWidth + 'px'
      createElement.style.backgroundImage = 'url(https://tse2-mm.cn.bing.net/th/id/OIP-C.P5tltuu7RiIwdKsZvyE7bAHaHa?w=183&h=183&c=7&r=0&o=5&dpr=2&pid=1.7)';
      createElement.style.backgroundSize="100%"
      section.append(createElement)
      setTimeout(() => {
        createElement.remove()
      }, 4000)
    }
    setInterval(createBubble, 50)

现在我们使用js生成元素的代码写完了,我们现在要去用css让这些span元素动起来了. 就像我们上面说了,让元素动起来就是借助了animation和 transform的特性.

 div span {
      position: absolute;
      bottom: -50px;
      background: transparent;
      border-radius: 50%;
      pointer-events: none;
      box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
      animation: animate 4s linear infinite;
    }

我们给元素添加了一个名叫animate以linear函数无限次执行的动画,每4s让它有以下动画过程:

 @keyframes animate {
      0% {
        transform: translateY(0%);
        opacity: 1;
      }

      99% {
        opacity: 1;
      }

      100% {
        transform: translateY(-1200%);
        opacity: 0;
      }
    }

因为上面我们设置bottom为-50px,气泡是向上移动的,所以我们的translateY是减小的才能达到1这种效果.

 div span::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      transform: scale(0.25) translate(-70%, -70%);
      background: radial-gradient(#fff, transparent);
      border-radius: 50%;
    }

我们还需要给这些个元素添加一个白色的背景,就是一个圆,border-radius设置为50%.