當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時(shí)間：2025/3/12 HTML 40 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS+JS实现 ❤️流星天体动画场景特效❤️ 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

?🍅 作者主頁(yè)：Java李楊勇?

🍅 簡(jiǎn)介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、【java李楊勇】公號(hào)作者? ?簡(jiǎn)歷模板、學(xué)習(xí)資料、面試題庫(kù)、技術(shù)互助【關(guān)注我，都給你】

🍅 歡迎點(diǎn)贊 👍 收藏 ?留言 📝 ??

效果演示：?文末獲取源碼?

代碼目錄：

主要代碼實(shí)現(xiàn)：

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>

上面的圖片文件需要引入

源碼獲取

大家可以點(diǎn)贊、收藏、關(guān)注、評(píng)論我啦、查看博主主頁(yè)或下方微信公眾號(hào)獲取~！

打卡文章更新?47?/? 100天

精彩推薦更新中：

HTML5大作業(yè)實(shí)戰(zhàn)案例《100套》

Java畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例《100套》

總結(jié)

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️流星天体动画场景特效❤️的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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