❤️创意网页：动态彩色泡泡页面（HTML+CSS+JS）简单好用

命运之光

发布于 2024-03-20 12:21:32

2780

发布于 2024-03-20 12:21:32

文章被收录于专栏：我在本科期间写的文章

简介

在这个创意的网页项目中，我设计了一个动态彩色泡泡页面，通过随机生成的彩色泡泡在屏幕上漂浮，为用户带来视觉上的享受和乐趣。这个网页展示了如何利用动画效果和随机色彩来创造一个令人愉悦的互动体验。

视频展示

泡泡

图片展示（1）

图片展示（2）

页面效果

网页背景采用了淡灰色调，为泡泡提供了一个突出的对比。每秒钟，网页会随机生成一个彩色泡泡，它会以流动的动画效果从屏幕底部升起，然后再回到原位。每个泡泡的颜色、大小和动画持续时间都是随机生成的，使得每个泡泡都独特且令人惊喜。

互动体验

用户在打开网页时，可以观察到不断产生和消失的彩色泡泡，它们在页面上飘动，创造出一种轻松和愉悦的氛围。用户可以沉浸在这个视觉盛宴中，观察泡泡的颜色和动画效果，感受它们带来的乐趣和放松。

项目源代码

<!DOCTYPE html>
<html>
<head>
  <title>动态彩色泡泡页面</title>
  <style>
    body {
      background-color: #f0f0f0;
      overflow: hidden;
    }
    
    .bubble {
      position: absolute;
      border-radius: 50%;
      opacity: 0.8;
      pointer-events: none;
      animation-name: float;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
    
    @keyframes float {
      0% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(200px, -200px);
      }
      100% {
        transform: translate(0, 0);
      }
    }
  </style>
</head>
<body>
  <script>
    function createBubble() {
      const bubble = document.createElement('div');
      bubble.className = 'bubble';
      
      const x = Math.random() * window.innerWidth;
      const y = Math.random() * window.innerHeight;
      const size = Math.random() * 40 + 20;
      const color = getRandomColor();
      
      bubble.style.left = x + 'px';
      bubble.style.top = y + 'px';
      bubble.style.width = size + 'px';
      bubble.style.height = size + 'px';
      bubble.style.backgroundColor = color;
      
      document.body.appendChild(bubble);
      
      const animationDuration = Math.random() * 6 + 4; // 随机生成动画持续时间
      
      bubble.style.animationDuration = animationDuration + 's';
      
      bubble.addEventListener('animationend', () => {
        bubble.remove(); // 动画结束时移除泡泡
      });
    }
    
    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
    
    setInterval(createBubble, 1000);
  </script>
</body>
</html>