canvas实现鼠标单击长剑刺破气泡破碎粒子动画代码-html代码-BFW代码库

canvas实现鼠标单击长剑刺破气泡破碎粒子动画代码

代码语言：html

所属分类：动画

代码描述：canvas实现鼠标单击长剑刺破气泡破碎粒子动画代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>气泡破碎 - 粒子物理动画</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: linear-gradient(135deg, #0a0a2e 0%, #1a1a4e 40%, #0d0d3d 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    font-family: Arial, sans-serif;
  }

  /* 背景星星 */
  .stars {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }

  .star {
    position: absolute;
    width: 2px; height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle var(--dur) ease-in-out infinite;
  }

  @keyframes twinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
  }

  /* 气泡容器 */
  .bubble-container {
    position: relative;
    width: 220px;
    height: 220px;
    animation: float 4s ease-in-out infinite;
    cursor: pointer;
    z-index: 10;
  }

  @keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(1deg); }
    50% { transform: translateY(-8px) rotate(0deg); }
    75% { transform: translateY(-20px) rotate(-1deg); }
  }

  /* 透明气泡 */
  .bubble {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    top: 10px; left: 10px;
    background: radial-gradient(
      ellipse at 30% 20%,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(200, 220, 255, 0.1) 20%,
      rgba(150, 180, 255, 0.05) 40%,
      rgba(100, 140, 255, 0.03) 60%,
      rgba(80, 120, 255, 0.05) 80%,
      rgba(60, 100, 255, 0.08) 100%
    );
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 0 40px rgba(255, 255, 255, 0.08),
      inset 10px 10px .........完整代码请登录后点击上方下载按钮下载查看