当前位置：首页 > news >正文

好看的css星星效果边框

news 来源：原创 2025/4/29 17:25:31

给客户做的动效图，结果应证了还是第一版的好，不忍舍弃，放这里，喜欢的人自取；
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Particle Star Border Demo</title>
  <style>
    body, html {
      background-color: #cccccc;
    }

    .item-container {
      position: relative;
      width: 300px;
      height: 150px;
      margin: 50px auto;
      border-radius: 16px;
      padding: 10px;
    }

    .item-border-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
      pointer-events: none;
      border-radius: 10px;
    }

    .item-content-canvas {
      position: relative;
      z-index: 1;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      background: linear-gradient(to bottom, #fff8e1, #fff0c2);
      border-radius: 10px;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      color: #ff9900;
    }
  </style>
</head>
<body>

<div class="item-container">
  <canvas id="borderCanvas" class="item-border-canvas"></canvas>
  <div class="item-content-canvas">
    ✨布灵布灵的星星✨
  </div>
</div>

<script>
(function () {
  const show = true; // 控制是否显示星星边框
  if (!show) return;

  const canvas = document.getElementById("borderCanvas");
  const ctx = canvas.getContext("2d");
  const offset = 15;
  let w, h, perimeter;
  let stars = [];
  let animationId;

  function initCanvas() {
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
    w = canvas.width;
    h = canvas.height;
    perimeter = 2 * (w + h);
    initStars();
  }

  function initStars() {
    stars = [];
    for (let i = 0; i < 40; i++) {
      stars.push({
        distance: Math.random() * perimeter,
        speed: 0.07 + Math.random() * 0.06,
        flickerPhase: Math.random() * Math.PI * 2,
        flickerSpeed: 0.006 + Math.random() * 0.009,
        maxSize: 10 + Math.random() * 5,
        rotate: Math.random() * Math.PI * 2,
      });
    }
  }

  function getPointOnPerimeter(distance) {
    let d = distance % perimeter;
    if (d < w) return { x: d, y: offset };
    d -= w;
    if (d < h) return { x: w - offset, y: d };
    d -= h;
    if (d < w) return { x: w - d, y: h - offset };
    return { x: offset, y: h - (d - w) };
  }

  function pulse(t) {
    return Math.pow(Math.sin(t), 4);
  }

  function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius, alpha, rotation) {
    let rot = rotation - Math.PI / 2;
    const step = Math.PI / spikes;
    ctx.beginPath();
    ctx.moveTo(cx + Math.cos(rot) * outerRadius, cy + Math.sin(rot) * outerRadius);

    for (let i = 0; i < spikes; i++) {
      rot += step;
      ctx.lineTo(cx + Math.cos(rot) * innerRadius, cy + Math.sin(rot) * innerRadius);
      rot += step;
      ctx.lineTo(cx + Math.cos(rot) * outerRadius, cy + Math.sin(rot) * outerRadius);
    }

    ctx.closePath();
    const r = Math.floor(220 + 35 * alpha);
    const g = Math.floor(190 + 50 * alpha);
    const b = Math.floor(60 + 30 * alpha);
    ctx.fillStyle = `rgba(${r},${g},${b},0.95)`;
    ctx.shadowBlur = 12;
    ctx.shadowColor = `rgba(${r},${g},${b},0.6)`;
    ctx.fill();

    if (alpha > 0.9) {
      ctx.beginPath();
      ctx.arc(cx, cy, outerRadius / 2, 0, 2 * Math.PI);
      ctx.fillStyle = `rgba(255, 245, 200, ${alpha * 0.7})`;
      ctx.fill();
    }
  }

  function animate() {
    ctx.clearRect(0, 0, w, h);
    stars.forEach(star => {
      star.distance += star.speed;
      const pos = getPointOnPerimeter(star.distance);
      const flicker = pulse(star.flickerPhase % (Math.PI * 2));
      const size = flicker * star.maxSize;
      drawStar(ctx, pos.x, pos.y, 5, size, size / 2, flicker, star.rotate);
      star.flickerPhase += star.flickerSpeed;
    });
    animationId = requestAnimationFrame(animate);
  }

  window.addEventListener("resize", () => {
    initCanvas();
  });

  initCanvas();
  animate();
})();
</script>
</body>
</html>