jquery星空闪烁动画
时间: 2023-10-25 11:39:21 浏览: 271
jQuery文字星星闪烁动画特效
以下是使用jQuery实现星空闪烁动画的示例代码:
HTML部分:
```
<div class="stars"></div>
```
CSS部分:
```
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.stars:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('https://cdn.jsdelivr.net/gh/Augus1999/CDN/img/20210706122341.png') repeat top center;
z-index: -1;
opacity: 0;
animation: twinkle 3s linear infinite;
}
@keyframes twinkle {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
```
JS部分:
```
$(document).ready(function() {
// 星空闪烁动画
$('.stars').fadeIn(2000);
});
```
在上面的示例中,我们通过CSS设置星空背景,并使用动画让星星闪烁。JS部分使用jQuery的fadeIn()方法在页面加载时显示星空。您可以自定义星空背景和动画效果,以及使用jQuery的其他方法来实现其他效果。
阅读全文