明天就是中秋節了，就想著用CSS畫一個月亮送給園友們吧，但是就畫一個月亮也太簡單了些，于是便加了一些星星點綴以及流星墜落的效果，這篇文章就用純CSS為大家實作一個“流星趕月”的效果，
實作效果
點擊運行查看
畫個月亮
首先我們先讓全屏背景變成黑色，然后實作一個大月亮??，并加點"漸變"，“光暈"等效果
- html
<body>
<div >
<div ></div>
</div>
</body>
- css
.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就可以實作
@keyframes moonflashing {
0% {
filter: brightness(0.8);
}
50% {
filter: brightness(1.3);
}
100% {
filter: brightness(0.8);
}
}
星星點綴
天空中只有月亮沒有星星怎么能行,我們在天空中加幾個星星
- html
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
- css
.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);
}
}
此時天空中便有了一閃一閃亮晶晶的星星啦??
流星劃過
接下來便是”流星“的實作了，我們先畫一個靜態的流星，流星包括它的頭+尾巴，我們可以先畫個流星頭
- html
<div ></div>
- css
.meteor {
position: absolute;
width: 4px;
height: 4px;
top: 30%;
left: 30%;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 5px 5px #636262;
}
流星頭實作很簡單，就是一個圓加box-shadow陰影效果
然后再畫它的尾巴，我們可以用它的偽元素實作
.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形式，因為需要它的透明效果
再將其旋轉45度,使用translate3d進行平移調整對齊
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 #636262;
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);
}
}
這時候便實作了流星墜落的效果（閉上眼睛想象一下它是動的??）
最后我們多加一點流星并給它們不同的延遲時間與影片時間
- html
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
- css
.meteor {
position: absolute;
width: 4px;
height: 4px;
opacity: 0;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 5px 5px #636262;
}
.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);
}
}
好啦,此時便實作了我們所需要的效果啦??????
中秋節快樂
最后中秋節快到了，我在這里提前祝大家節日快樂，闔家團圓，沒什么可送你們的，我就把這輪明月??當作節日禮物送給大家了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/506052.html
標籤：其他