html星星闪烁效果代码
时间: 2023-09-21 07:10:59 浏览: 57
以下是使用CSS实现星星闪烁效果的代码:
HTML代码:
```html
<div class="stars">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
```
CSS代码:
```css
.stars {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
}
.star {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
animation: twinkle 1s ease-in-out infinite;
}
.star:nth-child(1) {
margin-left: 0;
animation-delay: 0s;
}
.star:nth-child(2) {
margin-left: 20px;
animation-delay: 0.2s;
}
.star:nth-child(3) {
margin-left: 40px;
animation-delay: 0.4s;
}
.star:nth-child(4) {
margin-left: 60px;
animation-delay: 0.6s;
}
.star:nth-child(5) {
margin-left: 80px;
animation-delay: 0.8s;
}
@keyframes twinkle {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
```
这段代码会在页面上显示五个白色的星星,它们会闪烁。你可以根据需要调整星星的大小、数量和颜色。