HTML:
<div class="cb"></div>
CSS:
body,
html {
background: linear-gradient(6deg, #214, #000);
height: 100%;
overflow: hidden;
}
@keyframes donghua {
0% {box-shadow: 0 0 0px #fff}
100% {box-shadow: 0 0 10px #fff}
0% {box-shadow: 0 0 0px #fff}
}
.cb{background-image: url(11.png); position: fixed; bottom: -16px; left: calc(50% - 100px); width: 200px; height: 200px;}
JS:
//月亮
let yl = document.createElement('div')
yl.style.width = '50px'
yl.style.height = '50px'
yl.style.position = 'fixed'
yl.style.top = '10%'
yl.style.left = '10%'
yl.style.background = 'rgba(255, 255, 0, 0.8)'
yl.style.borderRadius = '50%'
document.body.appendChild(yl)
//星星
let n = 100;
for (let i = 0; i < n; i++) {
let a = Math.round(Math.random() * innerWidth)
let b = Math.round(Math.random() * innerHeight / 2)
let oDiv = document.createElement('div')
oDiv.style.width = '3px'
oDiv.style.height = '3px'
oDiv.style.borderRadius = '50%'
oDiv.style.animation = 'donghua 0.5s infinite linear'
oDiv.style.position = 'absolute'
oDiv.style.top = b + 'px'
oDiv.style.left = a + 'px'
oDiv.style.background = '#fff'
document.body.appendChild(oDiv)
}
//烟花
document.onclick = function (e) {
let x = e.clientX;
let y = e.clientY;
let w = document.body.offsetWidth;
let h = document.body.offsetHeight;
yanhua(x, y, w, h);
}
function yanhua(x, y, w, h) {
let Ddiv = document.createElement('div');
Ddiv.style.width = '4px';
Ddiv.style.height = '8px';
Ddiv.style.position = 'absolute'
Ddiv.style.left = x - 5 + 'px';
Ddiv.style.top = h - 20 + 'px';
Ddiv.style.background = '#ff3300'
document.body.appendChild(Ddiv);
let sd = 10;
let ss = setInterval(function () {
if (Ddiv.offsetTop < y) {
document.body.removeChild(Ddiv);
clearInterval(ss);
baozha(x, y, w, h)
}
Ddiv.style.top = Ddiv.offsetTop - sd + "px";
}, 1000 / 60)
};
function baozha(x, y, w, h) {
let bz = [];
let lz = 80;
for (let i = 0; i < lz; i++) {
let bzx = Math.round(Math.random() * 40) - 20;
let bzy = Math.round(Math.random() * 40) - 20;
bz[i] = document.createElement('div')
bz[i].style.width = '2px';
bz[i].style.height = '2px';
bz[i].style.background = '#ffff00'
bz[i].style.top = y + bzy + 'px'
bz[i].style.left = x + bzx + 'px'
bz[i].style.position = "absolute"
bz[i].bzxx = Math.round(Math.random() * 20) - 10;
bz[i].bzyy = Math.round(Math.random() * 20) - 10;
document.body.appendChild(bz[i])
}
let s = 0
setInterval(function () {
for (let i = 0; i < lz; i++) {
s++;
if (s < 1500) {
// if (bz[i].offsetTop < 0 || bz[i].offsetTop > h || bz[i].offsetLeft < 0 || bz[i].offsetLeft > w) {
// document.body.removeChild(bz[i])
// } else {
bz[i].style.top = bz[i].offsetTop + bz[i].bzyy + 'px';
bz[i].style.left = bz[i].offsetLeft + bz[i].bzxx + 'px';
bz[i].bzyy++;
// }
} else {
for (let i = 0; i < lz; i++) {
document.body.removeChild(bz[i])
}
}
}
}, 1000 / 60)
}