http://codepen.io/Lewitje/pen/rLmvoO/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>The uncomfortable btn</title> <style type="text/css"> @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300"; * { font-family: 'Source Sans Pro', sans-serif; box-sizing: border-box; font-weight: 300; padding: 0; margin: 0; } .btn-wrapper { position: fixed; top: calc(50% - 22px); left: 0; width: 100%; text-align: center; } .btn { display: inline-block; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; outline: 0; background-color: #00f0a8; height: 45px; line-height: 42px; padding: 0 30px; font-size: 20px; border-radius: 30px; color: #282d32; cursor: pointer; -webkit-transition: all .5s; transition: all .5s; -webkit-transition-timing-function: cubic-bezier(0.2, 3, 0.4, 1); transition-timing-function: cubic-bezier(0.2, 3, 0.4, 1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .btn:hover { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .btn:active { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } </style> </head> <body> <div class="btn-wrapper"> <button type="button" class="btn">touch me</button> </div> <canvas id="canvas"></canvas> </body> <script type="text/javascript"> var c = document.getElementById('canvas'); var ctx = c.getContext('2d'); var btn = document.getElementsByClassName('btn')[0]; c.width = window.innerWidth; c.height = window.innerHeight; var mouseX = c.width / 2; var mouseY = c.height / 2; var txtPosition = 0; var particles = []; btn.addEventListener('mouseup', function(e){ mouseX = e.clientX; mouseY = e.clientY; createParticles(); changeText(); }); setTimeout(function(){ createParticles(); }, 250); draw(); function draw(){ drawBg(); incParticles(); drawParticles(); window.requestAnimationFrame(draw); } function drawBg(){ ctx.rect(0, 0, c.width, c.height); ctx.fillStyle = "rgb(40, 45, 50)"; ctx.fill(); } function drawParticles(){ for(i = 0; i < particles.length; i++){ ctx.beginPath(); ctx.arc(particles[i].x, particles[i].y, particles[i].size, 0, Math.PI * 2); ctx.fillStyle = particles[i].color; ctx.closePath(); ctx.fill(); } } function incParticles(){ for(i = 0; i < particles.length; i++){ particles[i].x += particles[i].velX; particles[i].y += particles[i].velY; particles[i].size = Math.max(0, (particles[i].size - .05)); if(particles[i].size === 0){ particles.splice(i, 1); } } } function createParticles(){ for(i = 0; i < 30; i++){ particles.push({ x: mouseX, y: mouseY, size: parseInt(Math.random() * 10), color: 'rgb(' + ranRgb() + ')', velX: ranVel(), velY: ranVel() }); } } function ranRgb(){ var colors = [ '255, 122, 206', '0, 157, 255', '0, 240, 168', '0, 240, 120' ]; var i = parseInt(Math.random() * 10); return colors[i]; } function ranVel(){ var vel = 0; if(Math.random() < 0.5){ vel = Math.abs(Math.random()); } else { vel = -Math.abs(Math.random()); } return vel; } // Text var btnTxt = [ 'hehe', 'ouch!', 'sparkles!', 'ooh', 'oooooh', 'ooooooooooh', 'HARDER', 'softer', 'tenderly', 'this is getting weird', 'please stop', '"gags"', 'woof', 'meow', '@Lewitje' ]; function changeText(){ if(txtPosition !== btnTxt.length){ btn.innerHTML = btnTxt[txtPosition]; txtPosition += 1; } } </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » canvas 按钮点击特效 喜欢 (0)or分享 (0)
