给客户做的动效图，结果应证了还是第一版的好，不忍舍弃，放这里，喜欢的人自取；
<!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>css">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>javascript">
(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>
