使用CSS實現(xiàn)流星雨背景?相信很多沒有經(jīng)驗的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),嘉黎企業(yè)網(wǎng)站建設(shè),嘉黎品牌網(wǎng)站建設(shè),網(wǎng)站定制,嘉黎網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,嘉黎網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
vue頁面使用
<template> <view class="space"> <view class="planet"> <view class="planet_shadow"></view> <view class="crater1"></view> <view class="crater2"></view> <view class="crater3"></view> <view class="crater4"></view> </view> <view class="stars"> <view class="star"></view> <view class="star pink"></view> <view class="star blue"></view> <view class="star yellow"></view> </view> </view> </template>
Style
<style lang="scss"> .space { width: 100%; height: 100vh; background: #121212; } .planet { width: 150px; height: 150px; border-radius: 50%; background: #333; position: absolute; left: 50%; top: 50%; margin: -75px 0 0 -75px; overflow: hidden; z-index: 2; } .planet_shadow { position: absolute; border-radius: 50%; height: 100%; width: 100%; top: -40%; right: -10%; border: 35px solid rgba(0, 0, 0, .15); } .crater1, .crater2, .crater3, .crater4 { position: absolute; border-radius: 50%; background: rgba(0, 0, 0, .3); box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2); } .crater1 { width: 20px; height: 20px; left: 25%; top: 20%; } .crater2 { width: 10px; height: 10px; left: 50%; top: 60%; } .crater3 { width: 15px; height: 15px; left: 30%; top: 65%; } .crater4 { width: 15px; height: 15px; left: 60%; top: 35%; } .star { display: block; width: 5px; height: 5px; border-radius: 50%; background: #FFF; top: 100px; left: 400px; position: relative; transform-origin: 100% 0; animation: star-ani 6s infinite ease-out; box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3); opacity: 0; z-index: 2; } .star:after { content: ''; display: block; top: 0px; left: 4px; border: 0px solid #fff; border-width: 0px 90px 2px 90px; border-color: transparent transparent transparent rgba(255, 255, 255, .3); transform: rotate(-45deg) translate3d(1px, 3px, 0); box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1); transform-origin: 0% 100%; animation: shooting-ani 3s infinite ease-out; } .pink { top: 30px; left: 395px; background: #ff5a99; animation-delay: 5s; -webkit-animation-delay: 5s; -moz-animation-delay: 5s; } .pink:after { border-color: transparent transparent transparent #ff5a99; animation-delay: 5s; -webkit-animation-delay: 5s; -moz-animation-delay: 5s; } .blue { top: 35px; left: 432px; background: cyan; animation-delay: 7s; -webkit-animation-delay: 7s; -moz-animation-delay: 7s; } .blue:after { border-color: 'transpareanimation-delay: 12s'; -webkit-animation-delay: 7s; -moz-animation-delay: 7s; animation-delay: 7s; } .yellow { top: 50px; left: 600px; background: #ffcd5c; animation-delay: 5.8s; } .yellow:after { border-color: transparent transparent transparent #ffcd5c; animation-delay: 5.8s; } @keyframes star-ani { 0% { opacity: 0; transform: scale(0) rotate(0) translate3d(0, 0, 0); -webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0); -moz-transform: scale(0) rotate(0) translate3d(0, 0, 0); } 50% { opacity: 1; transform: scale(1) rotate(0) translate3d(-200px, 200px, 0); -webkit-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0); -moz-transform: scale(1) rotate(0) translate3d(-200px, 200px, 0); } 100% { opacity: 0; transform: scale(1) rotate(0) translate3d(-300px, 300px, 0); -webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0); -moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0); } } </style>
看完上述內(nèi)容,你們掌握使用CSS實現(xiàn)流星雨背景的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
網(wǎng)站名稱:使用CSS實現(xiàn)流星雨背景
網(wǎng)站鏈接:http://muchs.cn/article26/geshjg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、網(wǎng)站改版、網(wǎng)站制作、網(wǎng)站營銷、定制網(wǎng)站、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)