<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png"> -->
<meta name="apple-mobile-web-app-title" content="CodePen">
<!-- <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111"> -->
<title>css样式粒子散开的按钮</title>
<style>
body {
display: grid;
place-items: center;
height: 100vh;
margin: 0;
}
button {
min-width: 135px;
max-width: 200px;
min-height: 50px;
border: 0;
outline: 0;
color: white;
background: #ee0979;
background: linear-gradient(to right, #ee0979, #ff6a00);
vertical-align: top;
}
button {
cursor: pointer;
}
</style>
<script>
window.console = window.console || function (t) { };
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<button>Button</button>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<script src="https://s3.us-east-2.amazonaws.com/zachsaucier-com/html2canvas.min.js"></script>
<script id="rendered-js">
var btn = document.querySelector("button");
var ctx;
var colorInfoElem = document.querySelector("#colorInfo");
html2canvas(btn).then(canvas => {
ctx = canvas.getContext("2d");
createParticleCanvas();
let reductionFactor = 17;
btn.addEventListener("click", e => {
// Get the color data for our button
let width = btn.offsetWidth;
let height = btn.offsetHeight;
let colorData = ctx.getImageData(0, 0, width, height).data;
// Keep track of how many times we've iterated (in order to reduce
// the total number of particles create)
let count = 0;
// Go through every location of our button and create a particle
for (let localX = 0; localX < width; localX++) {
for (let localY = 0; localY < height; localY++) {
if (count % reductionFactor === 0) {
let index = (localY * width + localX) * 4;
let rgbaColorArr = colorData.slice(index, index + 4);
let bcr = btn.getBoundingClientRect();
let globalX = bcr.left + localX;
let globalY = bcr.top + localY;
createParticleAtPoint(globalX, globalY, rgbaColorArr);
}
count++;
}
}
});
});
/* An "exploding" particle effect that uses circles */
var ExplodingParticle = function () {
// Set how long we want our particle to animate for
this.animationDuration = 1000; // in ms
// Set the speed for our particle
this.speed = {
x: -5 + Math.random() * 10,
y: -5 + Math.random() * 10
};
// Size our particle
this.radius = 5 + Math.random() * 5;
// Set a max time to live for our particle
this.life = 30 + Math.random() * 10;
this.remainingLife = this.life;
// This function will be called by our animation logic later on
this.draw = ctx => {
let p = this;
if (this.remainingLife > 0 &&
this.radius > 0) {
// Draw a circle at the current location
ctx.beginPath();
ctx.arc(p.startX, p.startY, p.radius, 0, Math.PI * 2);
ctx.fillStyle = "rgba(" + this.rgbArray[0] + ',' + this.rgbArray[1] + ',' + this.rgbArray[2] + ", 1)";
ctx.fill();
// Update the particle's location and life
p.remainingLife--;
p.radius -= 0.25;
p.startX += p.speed.x;
p.startY += p.speed.y;
}
};
};
var particles = [];
function createParticleAtPoint(x, y, colorData) {
let particle = new ExplodingParticle();
particle.rgbArray = colorData;
particle.startX = x;
particle.startY = y;
particle.startTime = Date.now();
particles.push(particle);
}
var particleCanvas, particleCtx;
function createParticleCanvas() {
// Create our canvas
particleCanvas = document.createElement("canvas");
particleCtx = particleCanvas.getContext("2d");
// Size our canvas
particleCanvas.width = window.innerWidth;
particleCanvas.height = window.innerHeight;
// Position out canvas
particleCanvas.style.position = "absolute";
particleCanvas.style.top = "0";
particleCanvas.style.left = "0";
// Make sure it's on top of other elements
particleCanvas.style.zIndex = "1001";
// Make sure other elements under it are clickable
particleCanvas.style.pointerEvents = "none";
// Add our canvas to the page
document.body.appendChild(particleCanvas);
}
function update() {
// Clear out the old particles
if (typeof particleCtx !== "undefined") {
particleCtx.clearRect(0, 0, window.innerWidth, window.innerHeight);
}
// Draw all of our particles in their new location
for (let i = 0; i < particles.length; i++) {
particles[i].draw(particleCtx);
// Simple way to clean up if the last particle is done animating
if (i === particles.length - 1) {
let percent = (Date.now() - particles[i].startTime) / particles[i].animationDuration;
if (percent > 1) {
particles = [];
}
}
}
// Animate performantly
window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update);
//# sourceURL=pen.js
</script>
<canvas width="1502" height="874"
style="position: absolute; top: 0px; left: 0px; z-index: 1001; pointer-events: none;"></canvas>
</body>
</html>