马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
×
效果如下：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流星雨效果</title>
<style>
body{
background-image: url("xuehua2.png");
}
body, html {
margin: 0;
padding: 0;
height: 100%;
}
#sky {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.star {
position: absolute;
width: 2px;
height: 2px;
background-color: white;
top: -2px;
right: 0;
opacity: 0.8;
}
</style>
</head>
<body>
<div id="sky">
<div class="star"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
js部分：
<script >
$(document).ready(function() {
const $sky = $('#sky');
const $star = $('.star');
const starCount = 2000; // 初始雨滴数量
const skyWidth = $sky.width();
const skyHeight = $sky.height();
function createStar() {
const left = Math.random() * skyWidth;
const size = Math.random() * 5;
const star = $('<div class="star"></div>');
star.css({
width: size,
height: size,
left: left,
top: -size
});
$sky.append(star);
animateStar(star);
}
function animateStar(star) {
const fallTime = Math.random() * 3000;
star.animate({ top: skyHeight }, fallTime, 'linear', function() {
star.remove();
});
}
for (let i = 0; i < starCount; i++) {
createStar();
}
setInterval(createStar, 10); // 每10毫秒添加一个流星
});
</script>
| 
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
