点击按钮发送爆炸动画效果
代码语言:html
所属分类:动画
代码描述:点击按钮发送爆炸动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Hind&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { font-size: calc(16px + (48 - 16)*(100vw - 320px)/(2560 - 320)); } body, button { font: 1em/1.5 "Hind", sans-serif; } body { background: #e3e4e8; display: flex; height: 100vh; overflow: hidden; } button { background: #255ff4; border-radius: 0.2em; color: #fff; cursor: pointer; margin: auto; padding: 0.5em 1em; transition: background .15s linear, color .15s linear; } button:focus, button:hover { background: #0b46da; } button:focus { outline: transparent; } button::-moz-focus-inner { border: 0; } button:active { transform: translateY(0.1em); } .exploding, .exploding:focus, .exploding:hover { background: transparent; color: transparent; } .exploding { pointer-events: none; position: relative; will-change: transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .particle { position: absolute; top: 0; left: 0; } .particle--debris { background: #255ff4; } .particle--fire { border-radius: 50%; } @media (prefers-color-scheme: dark) { body { background: #17181c; } } </style> </head> <body translate="no"> <button type="button">Explode</button> <script > document.addEventListener("DOMContentLoaded",() => { let button = new ExplosiveButton("button"); }); class ExplosiveButton { constructor(el) { this.element = document.querySelector(el); this.width = 0; this.height = 0; this.centerX = 0; this.centerY = 0; this.pieceWidth = 0; this.pieceHeight = 0; this.piecesX = 9; this.piecesY = 4; this.duration = 1000; this.updateDimensions(); window.addEventListener("resize",this.updateDimensions.bind(this)); if (document.body.animate) this.element.addEventListener("click",this.explode.bind(this,this.duration)); } updateDimensions() { this.width = pxToEm(this.element.offsetWidth); this.height = pxToEm(this.element.offsetHeight); this.centerX = this.width / 2; this.centerY = this.height / 2; this.pieceWidth = this.width / this.piecesX; this.pieceHeight = this.height / this.piecesY; } explode(duration) { let explodingState = "exploding"; if (!this.element.classList.contains(explodingState)) { this.element.classList.add(explodingState); this.createParticles("fire",25,duration); this.createParticles("debris",this.piecesX * this.piecesY,duration); } } createParticles(kind,count,duration) { for (let c = 0; c < count; ++c) { let r = randomFloat(0.25,0.5), diam = r * 2, xBound = this.centerX - r, yBound = this.centerY - r, easing = "cubic-bezier(0.15,0.5,0.5,0.85)"; if (kind == "fire") { let x = this.centerX + randomFloat(-xBound,xBound), y = this.centerY + randomFloat(-yBound,yBound), a = calcAngle(this.centerX,this.centerY,x,y), dist = randomFloat(1,5); new FireParticle(this.element,x,y,diam,diam,a,dist,duration,easing); } else if (kind == "debris") { let x = (this.pieceWidth / 2) + this.pieceWidth * (c % this.piecesX), y = (this.pieceHeight / 2) + this.pieceHeight * Math.floor(c / this.piecesX), a = calcAngle(this.centerX,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0