写一个灯光的发光的js背景特效
时间: 2023-11-22 12:53:44 浏览: 87
以下是一个简单的实现背景灯光发光的JS特效。实现思路是创建多个div元素作为光源,并用CSS动画让它们闪烁。
HTML代码:
```
<div id="bg-lights"></div>
```
CSS代码:
```
#bg-lights {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#bg-lights div {
position: absolute;
border-radius: 50%;
opacity: 0;
animation-name: light;
animation-duration: 1s;
animation-delay: 0s;
animation-iteration-count: infinite;
}
#bg-lights div:nth-child(1) {
background-color: #ff0000;
width: 100px;
height: 100px;
top: 20%;
left: 10%;
}
#bg-lights div:nth-child(2) {
background-color: #00ff00;
width: 80px;
height: 80px;
top: 40%;
left: 30%;
}
#bg-lights div:nth-child(3) {
background-color: #0000ff;
width: 60px;
height: 60px;
top: 60%;
left: 50%;
}
#bg-lights div:nth-child(4) {
background-color: #ffff00;
width: 40px;
height: 40px;
top: 80%;
left: 70%;
}
@keyframes light {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
```
JS代码:
```
function createLights() {
var bgLights = document.getElementById("bg-lights");
for (var i = 0; i < 4; i++) {
var light = document.createElement("div");
light.classList.add("light");
bgLights.appendChild(light);
}
}
createLights();
```
以上代码会在页面中创建一个全屏的div元素作为背景容器,然后在其中创建四个光源div元素,并用CSS动画让它们闪烁。你可以根据需要调整光源的数量、大小、颜色和位置。
阅读全文