【日常记录】【CSS】生成动态气泡小球

news2024/11/24 17:28:11

文章目录

- 1、分析
- 2、实现

1、分析

在这里插入图片描述

核心有两点，通过这两个不一样就可以实现每个小球的颜色、动画时间不一致

给每个元素都设置一个css 变量 bgc 用于控制每一个小球的颜色
给每个元素都设置一个css 变量 duration 用于控制每一个小球的时间

2、实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: darkslategrey;
    }

    .main {
      display: flex;
      overflow: hidden;
      height: 100vh;
      width: 100vw;
      justify-content: center;
      align-items: flex-end;
    }

    span {
      width: 15px;
      height: 15px;
      background-color: var(--bgc);
      border-radius: 50%;
      margin: 0 4px;
      animation: move var(--duration) linear infinite;
      box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
    }

    @keyframes move {
      0% {
        transform: translateY(10vh) scale(0);
      }

      100% {
        transform: translateY(-100vh) scale(1);
      }
    }
  </style>
</head>

<body>
  <div class="main">

  </div>
  <script>
    function generateRandomHexColor() {
      // 生成随机的 R、G、B 分量
      var red = Math.floor(Math.random() * 256);
      var green = Math.floor(Math.random() * 256);
      var blue = Math.floor(Math.random() * 256);

      // 将 R、G、B 分量转换为十六进制字符串
      var redHex = red.toString(16).padStart(2, '0');
      var greenHex = green.toString(16).padStart(2, '0');
      var blueHex = blue.toString(16).padStart(2, '0');

      // 拼接成十六进制颜色字符串
      var hexColor = '#' + redHex + greenHex + blueHex;

      return hexColor;
    }
    let mainEl = document.querySelector('.main')
    let fragment = document.createDocumentFragment()
    new Array(80).fill(0).forEach(f => {
      let spanEl = document.createElement('span')
      spanEl.style.setProperty('--bgc', generateRandomHexColor())
      spanEl.style.setProperty('--duration', Math.random() * 5 + 3 + 's')
      fragment.append(spanEl)
    })
    mainEl.append(fragment)

  </script>
</body>

</html>