CSS中秋特别篇---使用CSS实现嫦娥奔月

凉城a
2,176 阅读7分钟

“我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛”

前言

摸鱼间，突然发现掘金酱又带着活动来了，仔细看了看选题参考。

  • 爬取xx月饼销量
  • 大数据告诉你中秋旅游去哪儿玩
  • 如何制作月亮特效
  • 中秋节电商页面制作
  • 嫦娥飞天动画如何实现
  • 代码写诗（中秋相关的诗句）
  • 月亮相关的技术文章
  • 使用css实现各类中秋元素

近期项目还在迭代，草稿箱在不断叠加，不适合现在发出来。本来都不知道写点啥，想了想好久没弄花里胡哨的CSS了，以前刚学前端的时候HTML、CSS、JS中，最吸引我的还是花里胡哨的CSS。还记得当年刚学习时画的CSS花里胡哨的非主流时钟、仿制某官网时添加轮播效果激动地一批、写个Table选项卡也能骄傲一会...... 趁着这股劲，用CSS搞点花里胡哨的东西吧,CSS整个嫦娥奔上月，在这里也祝掘友们中秋节快乐，摸鱼事业蒸蒸日上，早日实现财富自由，身体健康，万事如意，顺便拜个早年。

但愿人长久，千里共婵娟。

先来个月黑风高夜，一轮圆月挂夜空。

思路很简单，造个div,再给几件华丽的css衣服。

HTML：

  <div class="moonback">

  </div>

CSS：

*{
  margin: 0;
  padding: 0;
}
.moonback {
  width: 100vw;
  height: 600vh;
  background-color: #000;
  margin: 0 auto;
  position: relative;
}
.moonback::before {
  content: ",";
  display: block;
  position: absolute;
  left: 200px;
  top: 100px;
  width: 200px;
  height: 200px;
  background-color: #ff0;
  border-radius: 100px;
}

用伪元素before画个圆月，看看效果，这个月亮果然是又大又圆。

image.png 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

来点小星星，顺便弄个月食看看吧

咱们用before画的圆月，就用after画点月食动画

    .moonback::after {
      content: " ";
      display: block;
      position: absolute;
      left: 26px;
      top: 0px;
      width: 200px;
      height: 200px;
      background-color: #000;
      border-radius: 100px;
      -webkit-animation: 8s dog linear infinite;
      -moz-animation: 8s dog linear infinite;
      animation: 8s dog linear infinite;
    }
      
    @-webkit-keyframes dog {
      0% {
        left: 27px;
        top: 0px;
      }

      100% {
        left: 399px;
        top: 216px;
      }
    }

    @-moz-keyframes dog {
      0% {
        left: 27px;
        top: 0px;
      }

      100% {
        left: 399px;
        top: 216px;
      }
    }

    @keyframes dog {
      0% {
        left: 27px;
        top: 0px;
      }

      100% {
        left: 399px;
        top: 216px;
      }
    }

这些代码就足矣来个月食啦，看看效果吧。 月食.gif

用before+after+content画会眨眼的小星星吧。

HTML：

  <div class="moonback">
    <div class="star"></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>

CSS：

.star{   
  position: absolute;   
}   
.star2{
  top: 150px;
  left: 100px;
}
.star3{
  left: 150px;
}
.star4{
  top: 150px;
  left: 150px;
}
.star5{
  top: 150px;
  left: 500px;
}
.star6{
  top: 150px;
  left: 550px;
}
.star::before{   
  content: "★";   
  display: block;   
  position: absolute;   
  left: 10px;   
  top: 20px;   
  width: auto;   
  height: auto;   
  color: #fff;   
  -webkit-transform:scale(0.5);   
  -moz-transform:scale(0.5);   
  transform:scale(0.5);   
  -webkit-animation: 1s starlight linear infinite;   
  -moz-animation: 1s starlight linear infinite;   
  animation: 1s starlight linear infinite;   
}   
.star::after{   
  content: "★";   
  display: block;   
  position: absolute;   
  left: 40px;   
  top: 120px;   

  width: auto;   
  height: auto;   
  color: #fff;   
  -webkit-transform:scale(0.5);   
  -moz-transform:scale(0.5);   
  transform:scale(0.5);   

  -webkit-animation: 2s starlight linear infinite;   
  -moz-animation: 2s starlight linear infinite;   
  animation: 2s starlight linear infinite;   
}

看看小星星的效果怎么样。

星星.gif

月亮有了，星星有了，是时候来个嫦娥奔月了

最简单的方案就是来个会飞的嫦娥，然后加点动画。顺着这个思路咱整一个先看看效果如何！ 嫦娥奔月就先不要月食了吧，满月空中悬，可寄相思苦。

白露为霜秋意浓，落叶尘土终相逢，又是一年中秋时，离乡游子醉相思。

HTML：

  <div class="moonback">
    <div class="star"></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="img"></div>
  </div>

CSS：

.img {
  width: 300px;
  height: 300px;
  position: absolute;
  bottom: 0;
  right: 0;
  background: url('./img/ce.gif');
  background-size: cover;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: 20s moon linear infinite;
  -moz-animation: 20s moon linear infinite;
  animation: 20s moon linear infinite;
}

@keyframes moon {
  0% {
    left: 70%;
    top: 70%;
  }
  30% {
    left: 50%;
    top: 50%;
  }
  60% {
    left: 30%;
    top: 30%;
  }
  100% {
    left: 10%;
    top: 10%;
  }
}

几行代码下去看看效果吧 动画.gif

所有实现月食、星星、嫦娥奔月代码都在这

技术详解区

实现月亮、月食、星星用到的是css3里面的伪元素，嫦娥奔月用到的是css3里面的动画。

关于伪元素

定义

伪元素顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，当然伪元素还包括:first-line,:first-letter和::selection

  • ::before和::after 是用来给元素添加额外内容的,因为只存在于作用元素内容的前后
  • ::before和::after 内部的content支持以下三种特性!
    • 字符串[“可以是符号什么的也可以是单纯的字符” ,支持unicode编码!!]
    • 属性[attr() , 可以获取标签上的元素属性,比如data-*的自定义属性,title,alt这些]
    • 引用媒体文件[url ,可以链接图片作为背景图什么的]
    • 计数器[counter()] 灵活运用这两个可以做好多东东,比如清除浮动,各种额外的视觉效果[阴影,跳转等]

用法

:before(IE7-浏览器不支持)

　　在元素内容的最开始插入生成内容

　　[注意]默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用

div:before{content:"前缀"}

:after(IE7-浏览器不支持)

　　在元素内容的最后插入生成内容

　　[注意]默认这个伪元素是行内元素，且继承元素可继承的属性；IE7-浏览器中必须声明!DOCTYPE，否则不起作用

div:after{content:"后缀"}

速查表

除了我用到的 ::before和::after，还有很多伪元素，下面是伪元素的速查表

    /* Typographic Pseudo-elements */
    ::first-line            /* 选取文字块首行字符 */
    ::first-letter          /* 选取文字块首行首个字符 */

    /* Highlight Pseudo-elements */
    ::selection             /* 选取文档中高亮(反白)的部分*/
    ::inactive-selection    /* 选取非活动状态时文档中高亮(反白)的部分*/
    ::spelling-error        /* 选取被 UA 标记为拼写错误的文本 */
    ::grammar-error         /* 选取被 UA 标记为语法错误的文本 */

    /* Tree-Abiding Pseudo-elements */
    ::before                /* 在选中元素中创建一个前置的子节点 */
    ::after                 /* 在选中元素中创建一个后置的子节点 */
    ::marker                /* 选取列表自动生成的项目标记符号 */
    ::placeholder           /* 选取字段的占位符文本(提示信息) */
    
    /* WebVTT Format */
    ::cue                   /* 匹配所选元素中 WebVTT 提示 */

    /* Fullscreen API */
    ::backdrop              /* 匹配全屏模式下的背景 */

重点

【content属性】

　　content属性应用于before和after伪元素

content:normal;(默认)
content:<string>|<uri>|attr(<identifier>)

【1】<string>里面的内容会原样显示，即使包含某种标记也不例外。

　　[注意1]如果希望生成内容中有一个换行，则需要使用\A

　　[注意2]若是一个很长的串，需要它拆分成多行则需要用\对换行符转义

div:before{
    content: "第一段\
              第二段";
}
div:after{
    content:"\A后缀";
}

关于CSS3动画animation

简介

transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的；

animation则是通过关键帧@keyframes来实现更为复杂的动画效果。

和transition类似，animation也是一个复合属性，包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode共8个子属性

浏览器支持

image.png [注意]IE9-不支持；safari4-8、IOS3.2-8.4、android2.1-4.4.4需要添加-webkit-前缀

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值：none 0 ease 0 1 normal
继承性：no
版本：CSS3
JavaScript 语法：object.style.animation="mymove 5s infinite"

语法

animation: name duration timing-function delay iteration-count direction;
值描述
animation-name规定需要绑定到选择器的 keyframe 名称。。
animation-duration规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。

写在最后

所有实现月食、星星、嫦娥奔月代码都在这

我是凉城a，一个前端，热爱技术也热爱生活。

与你相逢，我很开心。

如果你想了解更多，请点这里，期待你的小⭐⭐

  • 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞👍和关注😊

  • 本文首发于掘金，未经许可禁止转载💌

avatar
文章
阅读
粉丝