微信满天星效果是通过插入一段特定的代码来实现的。在代码中,需要替换`background:urlno-repeat;`这一行中的`star.png`,填入正确的图像路径。将以上代码保存为一个HTML文件,将星星图像放在与HTML文件相同的目录中,并在浏览器中打开该HTML文件,即可看到微信满天星效果。
微信满天星效果是通过插入一段特定的代码来实现的。以下是一个示例代码:
```html
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}
.star {
position: absolute;
background: url(star.png) no-repeat;
background-size: contain;
width: 20px;
height: 20px;
animation: twinkle 1s infinite;
opacity: 0;
}
@keyframes twinkle {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
function createStar() {
const star = document.createElement("div");
star.classList.add("star");
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
const size = Math.random() * 5 + 1;
const duration = Math.random() * 3 + 1;
star.style.left = x + "px";
star.style.top = y + "px";
star.style.width = size + "px";
star.style.height = size + "px";
star.style.animationDuration = duration + "s";
document.querySelector(".stars").appendChild(star);
setTimeout(() => {
star.remove();
}, duration * 1000);
}
setInterval(createStar, 100);
```
需要注意的是,满天星效果需要一个名为 `star.png` 的星星图像作为背景。在代码中,需要替换 `background: url(star.png) no-repeat;` 这一行中的 `star.png` ,填入正确的图像路径。
将以上代码保存为一个 HTML 文件,将星星图像放在与 HTML 文件相同的目录中,并在浏览器中打开该 HTML 文件,即可看到微信满天星效果。