当前位置：首页 > 前端技术 > HTML >内容正文

HTML

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

发布时间：2025/3/12 HTML 39 豆豆

生活随笔收集整理的这篇文章主要介绍了 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>

上面的图片文件需要引入

源码获取

大家可以点赞、收藏、关注、评论我啦、查看博主主页或下方微信公众号获取~！

打卡文章更新 47 / 100天

精彩推荐更新中：

HTML5大作业实战案例《100套》

Java毕设项目精品实战案例《100套》

总结

以上是生活随笔为你收集整理的HTML+CSS+JS实现 ❤️流星天体动画场景特效❤️的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

上一篇：《零基础》MySQL UNION 操作符
下一篇： HTML+CSS+JS实现 ❤️HTML