CSS制作月有阴晴圆缺HTML结构如下 1. 素材-月亮背景图 inner-moon是制作圆形发光的月亮 2. 移动关键

我正在参加码上掘金体验活动，详情：show出你的创意代码块

HTML结构如下

<body>
  <div class="moon">
    <div class="inner-moon"></div>
  </div>
</body>

1. 素材-月亮背景图 inner-moon是制作圆形发光的月亮

2. 移动关键animation的属性animation-direction

animation-direction: alternate则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放，再配合animation-iteration-count: infinite;使动画永远持续下去

CSS代码

  *{
    padding: 0;
    margin: 0;
  }
  body{
    width: 100%;
    min-height: 100vh;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
  }
  .moon{
    width: 600px;
    height: 600px;
    border-radius: 50%;
    position: relative;
  }
  @keyframes rotate {
    100%{
      transform: rotate(360deg);
    }
  }
  
  .inner-moon{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4566a9fd28884de5b0cf49bcf84e5e4d~tplv-k3u1fbpfcp-watermark.image);
    box-shadow: 0 0 20px rgba(255, 255, 255, .6);
    position: absolute;
    top:0;
    left: 50%;
    transform:  translate(-50%, -50%);
  }
  .inner-moon:before{
    width: 100%;
    height: 100px;
    border-radius: 50%;
    content: "";
    background-color: #000;
    position: absolute;
    top: 0;
    left: 120px;

    animation:  translate 15s linear infinite alternate;
  }
  @keyframes translate {
    100%{
      left: -120px;
    }
  }

3. 无线次数使moon自转，inner-moon:before上下摇摆

  *{
    padding: 0;
    margin: 0;
  }
  body{
    width: 100%;
    min-height: 100vh;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
  }
  .moon{
    width: 600px;
    height: 600px;
    border-radius: 50%;
    animation: rotate 20s linear infinite;
    position: relative;
  }
  @keyframes rotate {
    100%{
      transform: rotate(360deg);
    }
  }

  .inner-moon{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: url(./moon.jpg);
    box-shadow: 0 0 20px rgba(255, 255, 255, .6);
    position: absolute;
    top:0;
    left: 50%;
    transform:  translate(-50%, -50%);
  }
  .inner-moon:before{
    width: 100%;
    height: 100px;
    border-radius: 50%;
    content: "";
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    animation:  translate 15s linear infinite alternate;
  }
  @keyframes translate {
    100%{
      top: 120px;
    }
  }

动画.gif

最后以上是css应用写法，还是得继续学习

animation动画属性

animation-duration
animation-delay 属性规定动画开始的延迟时间
animation-iteration-count 属性指定动画应运行的次数
animation-direction 属性指定是向前播放、向后播放还是交替播放动画
- normal - 动画正常播放（向前）。默认值
- reverse - 动画以反方向播放（向后）
- alternate - 动画先向前播放，然后向后
- alternate-reverse - 动画先向后播放，然后向前
animation-timing-function 属性规定动画的速度曲线
- ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
- linear - 规定从开始到结束的速度相同的动画
- ease-in - 规定慢速开始的动画
- ease-out - 规定慢速结束的动画
- ease-in-out - 指定开始和结束较慢的动画
- cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值
animation-fill-mode插入关键帧
- none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
- forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
- backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
- both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。