點擊螢屏放煙花🎆
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Firework</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
background-color: #000;
height: 100%;
width: 100%;
font-size: 10pt;
overflow: hidden;
}
span {
display: inline-block;
text-align: center;
position: fixed;
transform: translate(0, 0);
transition-property: transform, color, font-size;
transition-duration: 1s;
color: #888;
}
h1 {
color: #444;
text-align: center;
line-height: 100vh;
}
</style>
</head>
<body onclick="clc()">
<h1>點擊螢屏放煙花</h1>
</body>
</html>
<script>
function clc(event) {
var e = event || window.event;
var x = (e.pageX || e.clientX);
var y = (e.pageY || e.clientY);
var r = Math.random() * 255;
var g = Math.random() * 128 + 127;
var b = 765 - r - g;
var color = [r, g, b];
color.sort((a, b) => {
return Math.random() < .5 ? -1 : 1;
})
for (var i = 0; i < 100; i++) {
fire(x, y, color[0], color[1], color[2])
}
}
function fire(x, y, r, g, b) {
var add = document.createElement('span')
add.innerHTML = '*'
add.style.left = x + 'px';
add.style.top = y + 'px';
document.body.appendChild(add);
setTimeout(() => {
var ran = Math.random() * 2 - 1;
var ran1 = (Math.random() * 2 - 1) * Math.sqrt(1 - Math.pow(ran, 2));
var str = 'translate(' + ((ran) * 20) + 'vmin,' + ((ran1) * 20 + 5) + 'vmin)';
add.style.transform = str;
add.style.color = 'rgb(' + r + ',' + g + ',' + b + ')';
add.style.fontSize = 'larger';
}, 1);
setTimeout(() => {
add.parentNode.removeChild(add);
}, Math.random() * 400 + 700);
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/259252.html
標籤：其他