AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

纯CSS实现“流星赶月”，祝大家中秋节快乐

2023-06-26 208
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 纯CSS实现“流星赶月”，祝大家中秋节快乐

image.png


明天就是中秋节了，就想着用CSS画一个月亮送给掘友们吧。但是就画一个月亮也太简单了些，于是便加了一些星星点缀以及流星坠落的效果。这篇文章就用纯CSS为大家实现一个“流星赶月”的效果。


实现效果


 <div class="wrap">
      <div class="moon"></div>
      <div class="star star1"></div>
      <div class="star star2"></div>
      <div class="star star3"></div>
      <div class="star star4"></div>
      <div class="star star5"></div>
      <div class="star star6"></div>
      <div class="star star7"></div>
      <div class="meteor meteor1"></div>
      <div class="meteor meteor2"></div>
      <div class="meteor meteor3"></div>
      <div class="meteor meteor4"></div>
      <div class="meteor meteor5"></div>
    </div>
  </body>

image.png


画个月亮


首先我们先让全屏背景变成黑色，然后实现一个大月亮🌕，并加点"渐变"，“光晕"等效果

  • html
<body>
    <div class="wrap">
      <div class="moon"></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;
      }

此时大月亮就出来了

image.png

然后给月亮加点”渐明渐暗“的动画效果,使用filter属性中的brightness就可以实现

@keyframes moonflashing {
        0% {
          filter: brightness(0.8);
        }
        50% {
          filter: brightness(1.3);
        }
        100% {
          filter: brightness(0.8);
        }
      }


星星点缀


天空中只有月亮没有星星怎么能行,我们在天空中加几个星星

  • html
<div class="star star1"></div>
      <div class="star star2"></div>
      <div class="star star3"></div>
      <div class="star star4"></div>
      <div class="star star5"></div>
      <div class="star star6"></div>
      <div class="star star7"></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);
        }
      }

此时天空中便有了一闪一闪亮晶晶的星星啦😊

image.png


流星划过


接下来便是”流星“的实现了，我们先画一个静态的流星，流星包括它的头+尾巴。我们可以先画个流星头

  • html


<div class="meteor"></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阴影效果

image.png

然后再画它的尾巴。我们可以用它的伪元素实现

.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形式，因为需要它的透明效果

image.png

再将其旋转45度,使用translate3d进行平移调整对齐

transform: rotate(-45deg) translate3d(1px, 1px, 0);
 transform-origin: 0% 0%;

image.png

接下来我们要做的就是让流星坠落下去，我们可以先定义一个动画


.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);
        }
      }

这时候便实现了流星坠落的效果（闭上眼睛想象一下它是动的🤣）

image.png

最后我们多加一点流星并给它们不同的延迟时间与动画时间

  • html
<div class="meteor meteor1"></div>
      <div class="meteor meteor2"></div>
      <div class="meteor meteor3"></div>
      <div class="meteor meteor4"></div>
      <div class="meteor meteor5"></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);
        }
      }

image.png

好啦,此时便实现了我们所需要的效果啦🎉🎉🎉


中秋节快乐


最后中秋节快到了，我在这里提前祝大家节日快乐，阖家团圆。没什么可送你们的，我就把这轮明月🌕当作节日礼物送给大家了


文章标签：
前端开发
东方小月
目录
相关文章
卡尔特斯
CSS3 小火箭上天效果
CSS3 小火箭上天效果
卡尔特斯
63 0
dufadayang
|
3月前
|
前端开发
再战CSS样式
再战CSS样式
dufadayang
143 62
百锦再@新空间代码工作室
|
4月前
|
前端开发 容器
《Html下雪特效》圣诞节快乐
《Html下雪特效》圣诞节快乐
百锦再@新空间代码工作室
29 1
一杯龙井解千愁
|
4月前
|
存储 数据采集 移动开发
H5、CSS3面试题，带走不用谢
H5，CSS3面试题
一杯龙井解千愁
46 0
掘金防诈骗集团CEO
|
前端开发
CSS实现可爱月饼
CSS实现可爱月饼
掘金防诈骗集团CEO
80 0
田八
|
前端开发 计算机视觉
用 css 画一个太极图，才几行代码就开始喊难了？
据说太极图里面的文化博大精深，有着一生二，二生三，三生万物的道理，虽然我不怎么懂，要让它转起来就会发现非常神奇，那今天我们就来用 css 画一个太极图吧。
田八
274 0
用 css 画一个太极图，才几行代码就开始喊难了？
南城FE
|
前端开发
那些炫酷的CSS文字效果之诗词《兔》
那些炫酷的CSS文字效果之诗词《兔》
南城FE
112 0
丘比特惩罚陆
|
JavaScript 前端开发
web前端html写一个动态中秋明月！祝福大家中秋快乐！
中秋节，是我们国家的四大传统节日之一！中秋节有很多的别称，有祭月节、月光诞、月夕、秋节、仲秋节、拜月节等等，仲秋节源自于天象崇拜，有上古时代秋夕祭月演变而来。中华求解中秋节自古便有祭月、赏月、吃月饼、看花灯、赏桂花、饮桂花酒等民俗，流传至今，经久不息。
丘比特惩罚陆
652 0
web前端html写一个动态中秋明月！祝福大家中秋快乐！
叶一一
|
机器学习/深度学习 前端开发 IDE
「趣学前端」昨天画了一张小滑板，今天看我用CSS让它滑起来
用技术实现梦想，用梦想打开创意之门。今天分享前端CSS中的transform知识点。
叶一一
141 1
叶一一
|
前端开发 JavaScript 容器
【CSS畅想】萤星漫舞，我用CSS绘制了一个属于夏日的回忆
用技术实现梦想，用梦想打开创意之门。萤星漫舞，我用CSS绘制了一个属于夏日的回忆
叶一一
231 1