HTML+CSS+JS实现 ❤️流星天体动画场景特效❤️

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

效果演示： 文末获取源码

代码目录：

主要代码实现：

CSS样式：

* {border-radius: 100px;
}body {font-size: 30px;color: white
}#ibandoc {color: white;
}html {height: 100%;background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);overflow: hidden;
}.container {display: flex;flex-direction: row;justify-content: space-evenly;align-items: center;height: 100vh;
}.night li {position: absolute;list-style: none;width: 5px;height: 5px;border-radius: 100%;background-color: #fff;transform: rotate(45deg);
}.night li:nth-child(1) {width: 16px;height: 16px;top: 80%;left: 25%;background-color: grey;
}.night li:nth-child(2) {top: 40%;left: 40%;
}.night li:nth-child(3) {opacity: 0;top: 20%;left: 45%;width: 5px;height: 37px;animation: meteor 1.5s infinite linear;animation-delay: 1s;
}.night li:nth-child(4) {top: 5%;left: 50%;
}.night li:nth-child(5) {opacity: 0;top: 20%;left: 55%;width: 1px;height: 15px;animation: meteor 1.5s infinite linear;
}@keyframes meteor {10% {opacity: 2;}80% {left: 5%;top: 85%;opacity: 0;}
}.planet {width: 285px;height: 285px;background-image: url("../img/bg1.jpg"););border-radius: 50%;background-size: cover;box-shadow: -80px -20px 70px 2px rgb(29, 28, 28) inset, 3px 0 20px rgba(206, 182, 138, 0.555);animation: spin 10s linear reverse infinite;transform: rotate(30deg);backface-visibility: hidden;
}}@keyframes animStar {from {transform: translateY(0px);}to {transform: translateY(-2000px);}
}@keyframes spin {100% {background-position: 100%;}
}

HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Planet!</title><link rel="stylesheet" href="css/style.css"></head><body><div id='stars'></div><div id='stars2'></div><div id='stars3'></div><div class="container"><div class="night"><ul><li></li><li></li><li></li><li></li><li></li></ul></div><div class="planet"></div></div></body></html>

上面的图片文件需要引入