vectorfetti+svg实现跟随鼠标用针戳破漂浮的气泡爆炸动画效果代码
代码语言:html
所属分类:其他
代码描述:vectorfetti+svg实现跟随鼠标用针戳破漂浮的气泡爆炸动画效果代码
代码标签: vectorfetti svg 跟随 鼠标 针 戳破 漂浮 气泡 爆炸 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0 auto; height: 100vh; background: linear-gradient(45deg, #000000,#232323); } .bubblePopper { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; width: 100%; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 28 28' height='28' width='28'%3E%3Cpath d='M 2 2 l23 23' fill='none' stroke='rgba(0,0,0,0.5)' stroke-width='1.6' stroke-linecap='round' /%3E%3Cpath d='M 2 2 l23 23' fill='none' stroke='%23ccc' stroke-width='1.4' stroke-linecap='round' /%3E%3Ccircle cx='24' cy='24' r='3.3' fill='rgba(0,0,0,0.5)' /%3E%3Ccircle cx='24' cy='24' r='3' fill='orange' /%3E%3C/svg%3E") 2 2, auto; } } .mouth, .eyeL, .eyeR { transition: 200ms; } #reset { position: fixed; bottom: 20px; right: 20px; height: 70px; width: 70px; border-radius: 50%; box-shadow: 0px 4px 6px rgba(0,0,0,0.8); border: none; cursor: pointer; font-weight: bold; background: #d1cfe2; } #reset > span { user-select: none; pointer-events: none; } #reset:hover { transform:translateY(-2px); box-shadow: 0px 6px 8px rgba(0,0,0,0.6); border: 2px solid #52b2cf; } </style> </head> <body translate="no"> <svg class="bubblePopper" viewBox="0 0 100 100"> <defs> <g id="bubbleDef"></g> <filter id="roughEdges"> <feTurbulence type="fractalNoise" baseFrequency=".3" numOctaves="10" /> <feDisplacementMap in="SourceGraphic" scale="25" /> <feComposite operator="in" in2="SourceGraphic" /> </filter> <radialGradient id="grad"> <stop offset="0%" stop-color="rgba(0,255,255,0.5)" /> <stop offset="100%" stop-color="rgba(0,255,255,0.1)" /> </radialGradient> </defs> <g id="bubbleArea"></g> </svg> <button id="reset" title="Maybe you were too harsh. Bring him back"><span> <svg viewBox="0 0 24 24" width="50%" height="100%" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"> <polyline points="1 4 1 10 7 10"></polyline> <polyline points="23 20 23 14 17 14"></polyline> <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path> </svg> </span> </button> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vectorfetti.min.js"></script> <script> const randInt = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; } function addListeners() { const bubbles = document.querySelectorAll('.bubble'); // add listener to all bubbles for (let i = 0; i < bubbles.length; i++) { bubbles[i].addEventListener('click', (e) => { handleBubbleClick(bubbles[i]); }); bubbles[i].addEventListener('mouseover', (e) => { handleBubbleClick(bubbles[i]); }); bubbles[i].addEventListener('touchstart', (e) => { e.preventDefault(); // Prevent default touch behavior handleBubbleClick(bubbles[i]); }); } } function handleBubbleClick(bubble) { const maskCircle = document.getElementById(bubble.id + 'mask'); const hole = maskCircle.querySelector('.r'); let animDur = parseInt(hole.getAttribute('dur')); let hh = window.innerHeight; let ww = window.innerWidth; let xOff = Math.floor(ww/90); let yOff = Math.floor(hh/90); maskCircle.setAttribute('transform', `translate(${randInt(-xOff, xOff)} ${randInt(-yOff, yOff)})`); // make it unclickable after clicked bubble.setAttribute('user-select', 'none'); bubble.setAttribute('pointer-events', 'none'); let br = bubble.getAttribute('r') * 1; bubble.setAttribute('r', br * 1.11); hole.beginElement(); confetti(bubble, {type: 'circle', colors:['rgba(255,255,255,0.3)', 'rgba(255,255,255,0.25)', 'rgba(255,255,255,0.2)', 'rgba(255,255,255,0.15)', 'rgba(255,255,255,0.1).........完整代码请登录后点击上方下载按钮下载查看
网友评论0