中秋節(jié)到了，就想著用CSS畫一個月亮送給園友們吧。但是就畫一個月亮也太簡單了些，于是便加了一些星星點綴以及流星墜落的效果。這篇文章就用純CSS為大家實現(xiàn)一個“流星趕月”的效果。
成都創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計,岳陽縣網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:岳陽縣等地區(qū)。岳陽縣做網(wǎng)站價格咨詢:13518219792
點擊運行查看
首先我們先讓全屏背景變成黑色，然后實現(xiàn)一個大月亮????，并加點"漸變"，“光暈"等效果
重慶分公司
重慶分公司
.wrap {
background: #000000;
width: 100vw;
height: 100vh;
position: relative;
}
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(40deg, #f9fabe, #fffd3b);
position: absolute;
top: 10%;
right: 20%;
box-shadow: 0 0 30px 0px #fffd3b, 0 0 80px 0 #ffffff;
}
此時大月亮就出來了
然后給月亮加點”漸明漸暗“的動畫效果,使用filter屬性中的brightness就可以實現(xiàn)
@keyframes moonflashing {
0% {
filter: brightness(0.8);
}
50% {
filter: brightness(1.3);
}
100% {
filter: brightness(0.8);
}
}
天空中只有月亮沒有星星怎么能行,我們在天空中加幾個星星
.star {
width: 2px;
height: 2px;
border-radius: 50%;
background: #ffffff;
position: absolute;
animation: starflashing 2s infinite;
}
.star1 {
top: 50%;
right: 20%;
}
.star2 {
top: 70%;
right: 30%;
}
.star3 {
top: 40%;
left: 20%;
}
.star4 {
top: 60%;
right: 10%;
}
.star5 {
top: 55%;
right: 44%;
}
.star6 {
top: 10%;
left: 30%;
}
.star7 {
top: 15%;
left: 20%;
}
然后再為星星加上“一閃一閃”的動畫???
@keyframes starflashing {
0% {
filter: brightness(0.3);
}
50% {
filter: brightness(1);
}
100% {
filter: brightness(0.3);
}
}
此時天空中便有了一閃一閃亮晶晶的星星啦????
接下來便是”流星“的實現(xiàn)了，我們先畫一個靜態(tài)的流星，流星包括它的頭+尾巴。我們可以先畫個流星頭
.meteor {
position: absolute;
width: 4px;
height: 4px;
top: 30%;
left: 30%;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 5px 5px #;
}
流星頭實現(xiàn)很簡單，就是一個圓加box-shadow陰影效果
然后再畫它的尾巴。我們可以用它的偽元素實現(xiàn)
.meteor:after {
content: "";
display: block;
border: 0px solid #fff;
border-width: 2px 100px;
border-color: transparent transparent transparent
rgba(255, 255, 255, 0.3);
}
注意這里的色值要用rgba形式，因為需要它的透明效果
再將其旋轉(zhuǎn)45度,使用translate3d進行平移調(diào)整對齊
transform: rotate(-45deg) translate3d(1px, 1px, 0);
transform-origin: 0% 0%;
接下來我們要做的就是讓流星墜落下去，我們可以先定義一個動畫
.meteor {
position: absolute;
width: 4px;
height: 4px;
top: 30%;
left: 30%;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 5px 5px #;
animation: meteorflashing 3s infinite linear 1s;
}
@keyframes meteorflashing {
0% {
opacity: 0;
transform: scale(0) translate3d(0, 0, 0);
}
50% {
opacity: 1;
transform: scale(1) translate3d(-200px, 200px, 0);
}
100% {
opacity: 0;
transform: scale(1) translate3d(-500px, 500px, 0);
}
}
這時候便實現(xiàn)了流星墜落的效果（閉上眼睛想象一下它是動的????）
最后我們多加一點流星并給它們不同的延遲時間與動畫時間
.meteor {
position: absolute;
width: 4px;
height: 4px;
opacity: 0;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 5px 5px #;
}
.meteor:after {
content: "";
display: block;
border: 0px solid #fff;
border-width: 2px 100px 2px 100px;
border-color: transparent transparent transparent
rgba(255, 255, 255, 0.3);
transform: rotate(-45deg) translate3d(1px, 1px, 0);
transform-origin: 0% 0%;
}
.meteor1 {
top: 2vh;
left: 30vw;
animation: meteorflashing 2s infinite linear 1s;
}
.meteor2 {
top: 22vh;
left: 80vw;
background: rgb(234, 0, 255);
animation: meteorflashing 2s infinite linear 1s;
}
.meteor3 {
top: 30vh;
left: 40vw;
animation: meteorflashing 3s infinite linear 2s;
}
.meteor4 {
top: 10vh;
left: 50vw;
animation: meteorflashing 3s infinite linear 1s;
}
.meteor5 {
top: 50vh;
right: 2vw;
animation: meteorflashing 3s infinite linear 3s;
}
@keyframes meteorflashing {
0% {
opacity: 0;
transform: scale(0) translate3d(0, 0, 0);
}
50% {
opacity: 1;
transform: scale(1) translate3d(-200px, 200px, 0);
}
100% {
opacity: 0;
transform: scale(1) translate3d(-500px, 500px, 0);
}
}
好啦,此時便實現(xiàn)了我們所需要的效果啦????????????
最后中秋節(jié)快到了，我在這里提前祝大家節(jié)日快樂，闔家團圓。沒什么可送你們的，我就把這輪明月????當(dāng)作節(jié)日禮物送給大家了
