HTML+CSS+JS实现 ❤️流星天体动画场景特效❤️
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS+JS实现 ❤️流星天体动画场景特效❤️
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?🍅 作者主頁：Java李楊勇?
🍅 簡(jiǎn)介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、【java李楊勇】公號(hào)作者? ?簡(jiǎn)歷模板、學(xué)習(xí)資料、面試題庫、技術(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)論我啦 、查看博主主頁或下方微信公眾號(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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《零基础》MySQL UNION 操作符
- 下一篇： linux为已有磁盘扩容 kvm,KVM