鼠标点击本页查看效果

代码

<style>
.click-particle{position:fixed;pointer-events:none;width:14px;height:14px;border-radius:50%;z-index:9999;animation:particle-explosion 1.1s ease-out forwards;box-shadow:0 0 6px #fffc}.dark .click-particle{box-shadow:0 0 8px #fff6}@keyframes particle-explosion{0%{opacity:1;transform:scale(.4) translate(0)}15%{opacity:1;transform:scale(1.3) translate(var(--dx),var(--dy))}60%{opacity:.8;transform:scale(1) translate(calc(var(--dx) * 2.5),calc(var(--dy) * 2.5))}to{opacity:0;transform:scale(.3) translate(calc(var(--dx) * 3.5),calc(var(--dy) * 3.5))}}.click-particle.color-1{background:#ffc1cc;background:radial-gradient(circle,#ffb3ba,#ffc1cc)}.click-particle.color-2{background:#bde4ff;background:radial-gradient(circle,#a8d8ff,#bde4ff)}.click-particle.color-3{background:#fff2a8;background:radial-gradient(circle,#ffe66d,#fff2a8)}.click-particle.color-4{background:#e6ccff;background:radial-gradient(circle,#d4a5ff,#e6ccff)}.click-particle.color-5{background:#c1ffc1;background:radial-gradient(circle,#a8e6a8,#c1ffc1)}.click-particle.color-6{background:#ffd4a3;background:radial-gradient(circle,#fc9,#ffd4a3)}.click-particle.color-7{background:#c4e8ff;background:radial-gradient(circle,#b3deff,#c4e8ff)}.click-particle.color-8{background:#f8d7da;background:radial-gradient(circle,#f5c2c7,#f8d7da)}.click-particle.color-9{background:#d1f2d1;background:radial-gradient(circle,#c3e6c3,#d1f2d1)}.click-particle.color-10{background:#fff0d4;background:radial-gradient(circle,#ffe8b3,#fff0d4)}.dark .click-particle.color-1{background:#ff6b8a;background:radial-gradient(circle,#ff4757,#ff6b8a)}.dark .click-particle.color-2{background:#4fc3f7;background:radial-gradient(circle,#29b6f6,#4fc3f7)}.dark .click-particle.color-3{background:#ffd54f;background:radial-gradient(circle,#ffca28,#ffd54f)}.dark .click-particle.color-4{background:#ba68c8;background:radial-gradient(circle,#ab47bc,#ba68c8)}.dark .click-particle.color-5{background:#81c784;background:radial-gradient(circle,#66bb6a,#81c784)}.dark .click-particle.color-6{background:#ffb74d;background:radial-gradient(circle,#ffa726,#ffb74d)}.dark .click-particle.color-7{background:#64b5f6;background:radial-gradient(circle,#42a5f5,#64b5f6)}.dark .click-particle.color-8{background:#f48fb1;background:radial-gradient(circle,#f06292,#f48fb1)}.dark .click-particle.color-9{background:#a5d6a7;background:radial-gradient(circle,#81c784,#a5d6a7)}.dark .click-particle.color-10{background:#ffe082;background:radial-gradient(circle,#ffd54f,#ffe082)}
</style>
<script type="module">document.addEventListener("DOMContentLoaded",()=>{function s(n,i,a,e,o){const t=document.createElement("div");t.className=`click-particle color-${o}`;const c=Math.cos(a)*e,l=Math.sin(a)*e;t.style.setProperty("--dx",c+"px"),t.style.setProperty("--dy",l+"px"),t.style.left=n+"px",t.style.top=i+"px";const d=Math.random()*6+8;t.style.width=d+"px",t.style.height=d+"px",document.body.appendChild(t),setTimeout(()=>{t.parentNode&&t.parentNode.removeChild(t)},1100)}document.addEventListener("click",n=>{for(let e=0;e<10;e++){const o=Math.PI*2/10*e,t=18+Math.random()*8,c=e%10+1;setTimeout(()=>{s(n.clientX,n.clientY,o,t,c)},e*12)}for(let e=0;e<4;e++){const o=Math.random()*Math.PI*2,t=18+Math.random()*10,c=Math.floor(Math.random()*10)+1;setTimeout(()=>{s(n.clientX,n.clientY,o,t,c)},(10+e)*12)}})});</script>