js+css实现可增减数量的鼠标可交互泡泡动画效果代码-html代码-BFW代码库

js+css实现可增减数量的鼠标可交互泡泡动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现可增减数量的鼠标可交互泡泡动画效果代码

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

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

  <head>
    <meta charset="UTF-8">
<style>
    .mza-app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(
      135% 120% at 18% 10%,
      #ffeaf3 0%,
      rgba(255, 234, 243, 0) 55%
    ),
    radial-gradient(
      120% 120% at 88% 86%,
      #ffe4ec 0%,
      rgba(255, 228, 236, 0) 60%
    ),
    linear-gradient(180deg, #ffecf4 0%, #ffe2cf 60%, #ffd9c0 100%);
  touch-action: none;
  user-select: none;
}
#mza-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: default;
}
.mza-ui {
  position: absolute;
  left: 16px;
  top: 16px;
  display: grid;
  gap: 8px;
  font: 500 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif;
  color: #3f2130;
  pointer-events: none;
}
.mza-ui-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mza-ui button {
  pointer-events: auto;
  appearance: none;
  border: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: radial-gradient(
      120% 120% at 30% 20%,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.12) 40%,
      rgba(255, 255, 255, 0) 68%
    ),
    linear-gradient(
      180deg,
      rgba(255, 205, 230, 0.65) 0%,
      rgba(255, 225, 190, 0.55) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 6px 18px rgba(120, 80, 100, 0.28);
  color: #3f2130;
  font-weight: 700;
  letter-spacing: 0.2px;
  transform: translateZ(0);
  transition: transform 120ms ease, box-shadow 150ms ease, filter 150ms ease;
  backdrop-filter: blur(6px) saturate(140%);
}
.mza-ui button:active {
  transform: translateY(1px) scale(0.98);
}
.mza-tip {
  padding: 6px 10px;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 235, 245, 0.16),
    rgba(255, 235, 245, 0.06)
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
</style>
  </head>
    
  <body>
  <div class="mza-app">
  <canvas id="mza-canvas" aria-label="Interactive bubbles"></canvas>
  <div class="mza-ui">
    <div class="mza-ui-row">
      <button id="mza-add">+5</button>
      <button id="mza-rem">−5</button>
      <button id="mza-reset">Reset</button>
    </div>
    <div class="mza-ui-row">
      <span class="mza-tip">Move to repel. Hold to attract. Click a bubble to pop.</span>
    </div>
  </div>
</div>
    <script  >
        
        const cv = document.getElementById("mza-canvas");
const ctx = cv.getContext("2d", { alpha: true });
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = "high";
let W = 1,
  H = 1,
  DPR = 1,
  RS = 0.95,
  READY = false;

const bg = document.createElement("canvas");
const bgc = bg.getContext("2d");

function nz(n) {
  return Math.max(1, Math.floor(n));
}
function bgReady() {
  return bg.width > 0 && bg.height > 0;
}

function drawBackground() {
  bg.width = nz(W * DPR * RS);
  bg.height = nz(H * DPR * RS);
  bgc.setTransform(DPR * RS, 0, 0, DPR * RS, 0, 0);
  bgc.clearRect(0, 0, W, H);
  const base = bgc.createLinearGradient(0, 0, 0, H);
  base.addColorStop(0, "#ffeaf3");
  base.addColorStop(0.6, "#ffe2cf");
  base.addColorStop(1, "#ffd9c0");
  bgc.fillStyle = base;
  bgc.fillRect(0, 0, W, H);
  const g1 = bgc.createRadialGradient(
    W * 0.22,
    H * 0.12,
    10,
    W * 0.22,
    H * 0.12,
    Math.max(W, H) * 0.9
  );
  g1.addColorStop(0, "rgba(255,168,205,0.24)");
  g1.addColorStop(1, "rgba(255,168,205,0)");
  bgc.fillStyle = g1;
  bgc.fillRect(0, 0, W, H);
  const g2 = bgc.createRadialGradient(
    W * 0.85,
    H * 0.88,
    10,
    W * 0.85,
    H * 0.88,
    Math.max(W, H) * 0.8
  );
  g2.addColorStop(0, "rgba(255,205,160,0.20)".........完整代码请登录后点击上方下载按钮下载查看