




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
第純CSS流星雨背景的示例代碼插件預(yù)覽圖
使用教程代碼展示
vue頁面使用
template
view>
Style
stylelang=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:-75px00-75px;
overflow:hidden;
z-index:2;
.planet_shadow{
position:absolute;
border-radius:50%;
height:100%;
width:100%;
top:-40%;
right:-10%;
border:35pxsolidrgba(0,0,0,.15);
.crater1,
.crater2,
.crater3,
.crater4{
position:absolute;
border-radius:50%;
background:rgba(0,0,0,.3);
box-shadow:inset3px3px0rgba(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-ani6sinfiniteease-out;
box-shadow:005px5pxrgba(255,255,255,.3);
opacity:0;
z-index:2;
.star:after{
content:'';
display:block;
top:0px;
left:4px;
border:0pxsolid#fff;
border-width:0px90px2px90px;
border-color:transparenttransparenttransparentrgba(255,255,255,.3);
transform:rotate(-45deg)translate3d(1px,3px,0);
box-shadow:001px0rgba(255,255,255,.1);
transform-origin:0%100%;
animation:shooting-ani3sinfiniteease-out;
.pink{
top:30px;
left:395px;
background:#ff5a99;
animation-delay:5s;
-webkit-animation-delay:5s;
-moz-animation-delay:5s;
.pink:after{
border-color:transparenttransparenttransparent#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:transparenttransparenttransparent#ffcd5c;
animation-delay:5.8s;
@keyframesstar-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)tra
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025屆江蘇省江陰市長涇二中學(xué)英語八下期中預(yù)測試題含答案
- 2025-2030中國城市園林行業(yè)市場發(fā)展前瞻及投資戰(zhàn)略研究報(bào)告
- 2025-2030中國博物館行業(yè)市場發(fā)展前瞻及投資戰(zhàn)略研究報(bào)告
- 教育合同網(wǎng)考答案模板
- 節(jié)能減排的綠色數(shù)據(jù)中心構(gòu)建策略
- 談判技巧在招聘與面試中的應(yīng)用
- 河南省期貨從業(yè)基礎(chǔ)知識:期貨合約標(biāo)的選擇考試試題
- 2024上半年四川公務(wù)員《行測》筆試真題及解析
- 2025年木工職業(yè)技能理論知識考試題庫(附答案)
- 塑料瓶廠企業(yè)管理制度
- 《活板》課件教學(xué)
- GB∕T 37361-2019 漆膜厚度的測定超聲波測厚儀法
- CAMDS操作方法及使用技巧
- 煤礦巷道頂板支護(hù)技術(shù)及事故防治措施
- DB31∕650-2020 非織造布單位產(chǎn)品能源消耗限額
- 《保障農(nóng)民工工資支付條例》口袋書課件
- 客戶滿意度管理辦法
- 教育信息化工作領(lǐng)導(dǎo)小組會議記錄
- (完整版)裝飾裝修工程監(jiān)理規(guī)劃
- 汽油柴油一書一簽
- IBMDS存儲的配置步驟
評論
0/150
提交評論