我们一起看月亮爬上来～

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

中秋佳节快乐

大家过节快乐啊！！你们发了什么福利？ 今天我的身体已经上班了，但是我的思想还在过节

赏月

中秋节的传统是什么？吃月饼，赏月。吃月饼我们都知道，什么美心、广州酒家。好吃，但是贵。
作为刚刚温饱的我，就只能在家赏月了。赏会动的月亮。这次就用animation来做一个圆圆的，从低处升到高处后，发出一闪一闪光芒的月亮。

效果

制造一个黑夜，加一个风景

<div class="tower">
    <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3c2032e18304993a72f2b35f746dad0~tplv-k3u1fbpfcp-watermark.image"/>
</div>

tip：可以把图片添加到掘金写文章的编辑器中，就可以得到图片地址了～是不是很方便

画个月亮，初始位置放在左下角

<div class="month"> 
</div>

width:100px;
height:100px;
border-radius:50%;
background-color:#dcd50a;
box-shadow:0px 0px 20px rgb(255, 255, 8);
/*位置定位在左下角*/
position:absolute;
bottom:60px;

升起的动画

@keyframes来创建动画内容，创建动画是通过逐步改变的CSS样式实现的
语法：@keyframes animationname {keyframes-selector {css-styles;}}
属性：

animationname，定义animation的名称。
keyframes-selector，动画持续时间的百分比。合法值：0-100%;from (和0%相同)to (和100%相同)
css-styles，一个或多个合法的CSS样式属性

@keyframes rise {
    from {
        bottom:60px;
        left:0px;
        opacity:1;
    }
    20%{
      opacity:0.3;
    }
    50% {
        opacity:1;
    }
    70% {
        opacity:0.3;
    }
    to {
        bottom:550px;
        left:300px;
        opacity:1;
    }
}

通过bottom和left改变月亮位置的同时，opacity让月亮在上升时忽亮忽暗

一闪一闪动画

这个就简单多了，其实就是上升过程过的opacity属性持续时间的百分比

@keyframes twinkle {
from {
    opacity:0.3;
}
50% {
    opacity:1;
}
to {
    opacity:0.3;
}

可以通过多设置百分位来控制月亮亮度的丝滑程度

2个动画已经创建完了，利用它们给月亮“赋能”

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

升起功能

.riseAnimation {
    animation:rise 6s ease forwards;
    -webkit-animation:rise 6s ease forwards;
}

闪烁功能

.twinkleAnimation {
    bottom:550px;
    left:300px;
    animation:twinkle 1s ease infinite;
    -webkit-animation:twinkle 1s ease infinite;
}

这里有个问题，riseAnimation和twinkleAnimation如果同时都设置给“月亮”的话，这动画先运行哪个功能呢？还是一起运行。按设想，应该是先上升，再闪烁。那么，先给月亮设置riseAnimation class，再用twinkleAnimation替换

var month = document.querySelector("#month");
const a = () => {
  month.classList.remove("riseAnimation")
  month.classList.add("twinkleAnimation");
}
month.addEventListener("webkitAnimationEnd", a);

结束

用animation写动画是不是很简单～～