举头望明月低头写代码——使用css实现中秋的月亮-一一网

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

丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。

前言

Hello，在这里先预祝大家中秋快乐呀~~（虽然过去多年，苏轼的这首词依然熟记在心）

举头望明月低头写代码

掘友们相隔千里万里，不能在这个团圆的日子里一起赏明月吃月饼（看需求写代码），那就一起云赏月，在下为各位xdm，jmm准备个月亮，请各位届时带上月饼按时赏月噢！

赏月第一步

首先先走出门，抬头望向天空；

放眼望去，万里星空。（我这里放了一张图加上黑色背景当作星空，canvas不是很熟练o(╥﹏╥)o）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>举头望明月  低头写代码</title>
  </head>
  <style>
    body {
      margin: 0;
    }
    .container {
      height: 100vh;
      background: black;
      background-image: url(../img/Otr0s.jpg);
      background-size: contain;
    }
   
  </style>
  <body>
    <div class="container">
     
    </div>
  </body>
</html>
复制代码

赏月第二步

星空有了，就是需要月亮了，

 <body>
    <div class="container">
      <div class="moon">
        
      </div>
    </div>
  </body>
  <style>
     .moon {
      position: absolute;
      top: 150px;
      left: 50%;
      width: 400px;
      height: 400px;
      box-shadow: 0 0 40px 15px white;
      background-color: #fff;
      transform: translateX(-50%);
      border: 1px solid #fff;
      border-radius: 50%;
      opacity: 0.9;
      box-sizing: border-box;
    }
  </style>
  
复制代码

box-shadow: 0 0 40px 15px white;为月亮加上闪闪发光的效果；

远远望去，仿佛看到了嫦娥捣药的场景，那就给月亮加点装饰：

 <body>
    <div class="container">
      <div class="moon">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
      </div>
    </div>
  </body>
  <style>
     .circle1 {
      position: absolute;
      top: 30px;
      right: 170px;
      width: 20px;
      height: 20px;
      background-color: darkgray;
      border-radius: 50%;
      opacity: 0.1;
      border: 1px solid #333;
    }
    .circle2 {
      position: absolute;
      top: 110px;
      right: 260px;
      width: 50px;
      height: 50px;
      background-color: darkgray;
      opacity: 0.1;
      border: 1px solid #333;
      border-radius: 50%;
    }
    .circle3 {
      position: absolute;
      top: 200px;
      right: 50px;
      opacity: 0.1;
      width: 80px;
      height: 80px;
      background-color: darkgray;
      border: 1px solid #333;
      border-radius: 50%;
    }
  </style>
复制代码

赏月第三步

月亮有了，好像还缺少星星哎~

星星来了~~

 <div class="start-box">
        <div class="star1"></div>
        <div class="star2"></div>
        <div class="star3"></div>
  </div>
复制代码

用了css一些常见的动画和样式，一个简易的月亮就诞生了，大家不要嫌弃(灬ꈍ ꈍ灬)！（卑微求赞~~）

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>举头望明月 低头写代码</title>
  </head>
  <style>
    body {
      margin: 0;
    }
    .container {
      position: relative;
      background: black;
      height: 100vh;
      background-image: url(../img/Otr0s.jpg);
      background-size: contain;
    }
    .moon {
      position: absolute;
      top: 150px;
      left: 50%;
      width: 400px;
      height: 400px;
      box-shadow: 0 0 40px 15px white;
      background-color: #fff;
      transform: translateX(-50%);
      border: 1px solid #fff;
      border-radius: 50%;
      opacity: 0.9;
      box-sizing: border-box;
    }
    .circle1 {
      position: absolute;
      top: 30px;
      right: 170px;
      width: 20px;
      height: 20px;
      background-color: darkgray;
      border-radius: 50%;
      opacity: 0.1;
      border: 1px solid #333;
    }
    .circle2 {
      position: absolute;
      top: 110px;
      right: 260px;
      width: 50px;
      height: 50px;
      background-color: darkgray;
      opacity: 0.1;
      border: 1px solid #333;
      border-radius: 50%;
    }
    .circle3 {
      position: absolute;
      top: 200px;
      right: 50px;
      opacity: 0.1;
      width: 80px;
      height: 80px;
      background-color: darkgray;
      border: 1px solid #333;
      border-radius: 50%;
    }
    .start-box {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 700px;
      height: 500px;
    }
    .star1 {
      position: absolute;
      top: 200px;
      right: 0;
      width: 50px;
      height: 6px;
      border-radius: 5px;
      background-color: white;
      animation: shine 0.5s linear infinite alternate;
    }
    .star1::after {
      position: absolute;
      top: -20px;
      right: 21px;
      width: 6px;
      height: 50px;
      border-radius: 5px;
      background-color: #fff;
      animation: shine 0.5s linear infinite alternate;
      content: '';
    }
    @keyframes shine {
      100% {
        background-color: gold;
      }
    }
    .star2 {
      position: absolute;
      top: 300px;
      left: 0;
      width: 30px;
      height: 4px;
      border-radius: 5px;
      background-color: white;
      animation: shine 0.3s linear infinite alternate;
    }
    .star2::after {
      position: absolute;
      top: -12px;
      right: 13px;
      width: 4px;
      height: 30px;
      border-radius: 5px;
      background-color: #fff;
      animation: shine 0.3s linear infinite alternate;
      content: '';
    }
    @keyframes shine {
      100% {
        background-color: gold;
      }
    }
    .star3 {
      position: absolute;
      bottom: 20px;
      right: 60px;
      width: 30px;
      height: 4px;
      border-radius: 5px;
      background-color: white;
      animation: shine 0.1s linear infinite alternate;
    }
    .star3::after {
      position: absolute;
      top: -12px;
      right: 13px;
      width: 4px;
      height: 30px;
      border-radius: 5px;
      background-color: #fff;
      animation: shine 0.1s linear infinite alternate;
      content: '';
    }
    @keyframes shine {
      100% {
        background-color: gold;
      }
    }
  </style>
  <body>
    <div class="container">
      <div class="moon">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
      </div>
      <div class="start-box">
        <div class="star1"></div>
        <div class="star2"></div>
        <div class="star3"></div>
      </div>
    </div>
  </body>
</html>

复制代码