31 lines
1.3 KiB
JavaScript
31 lines
1.3 KiB
JavaScript
document.querySelectorAll('button').forEach(function(button) {
|
|
button.addEventListener('mouseenter', function() {
|
|
function random(max) {
|
|
return Math.random() * (max - 0) + 0;
|
|
}
|
|
|
|
var c = document.createDocumentFragment();
|
|
for (var i = 0; i < 100; i++) {
|
|
var styles = 'position: absolute;' +
|
|
'left: ' + (random(100)) + '30%;' + // Limit the position to within the button
|
|
'top: ' + (random(60)) + '30%;' + // Limit the position to within the button
|
|
'width: 3px; height: 6px; ' + // Increase size
|
|
'transform: translate(-50%, -50%) rotate(' + random(360) + 'deg);' +
|
|
'background: hsla(' + random(360) + ', 100%, 50%, 1);' +
|
|
'animation: bang 2000ms ease-out forwards;' +
|
|
'opacity: 0;' +
|
|
'z-index: 10;'; // Set a high z-index
|
|
|
|
var e = document.createElement("i");
|
|
e.style.cssText = styles;
|
|
c.appendChild(e);
|
|
}
|
|
button.appendChild(c);
|
|
setTimeout(() => {
|
|
// Create an array of the <i> elements to remove
|
|
let childrenToRemove = Array.from(button.querySelectorAll('i'));
|
|
// Remove each <i> element
|
|
childrenToRemove.forEach(child => button.removeChild(child));
|
|
}, 3000);
|
|
});
|
|
});
|