悟空打月亮简单动画——中秋快乐-一一网

前言

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

没有好的创意和一定的技术积累，但是还是寻思着参加一下活动，一个通过CSS简单实现的小动画，小小创意，重在参与，各位中秋快乐，万一运气好就得一个安慰奖了呢（滑稽）

这里我用CSS和animation还有一些过渡来实现一个打月亮的效果，js作为辅导来添加一些类名或设置一些属性。

实现

这个效果其实没什么难度，就是用很多的animation来设置box-shadow属性还有transforn属性，就可以完成这个简单的小动画了。

大月亮
首先画一个大月亮，这个其实就是一个div，把它放在左上角位置，加一个闪烁的效果；

悟空
悟空是我在百度找的一张图片，把他放在右下角，这个很简单通过定位即可完成；

龟派气功
龟派气功这里我是通过一个div画一个白色的原形，然后通过设置animation不断来调整box-shadow即可完成一个蓄力的波动效果，代码如下：

@keyframes twinkle {
  0% {
    transform: scale(1);
    box-shadow: 0 0 5px #fff;
  }
  25% { transform: scale(.65); }
  50% {
    transform: scale(.5);
    box-shadow: 0 0 10px #fff;
  }
  25% { transform: scale(.85); }

  100% {
    transform: scale(1);
    box-shadow: 0 0 5px #fff;
  }
}
复制代码

发射
发射是就是通过一个过渡效果来让“波”的宽度变宽，这里要注意的是，定位的时候我们要以right来定位，这样增加宽度的时候，就会从右边开始往左边慢慢变宽了。

爆炸
月亮爆炸的话，就是通过不断动画调整scale来实现的。

动画的连贯
上面说的都是每个部分的动画的实现，但是想让这些动画一个挨着一个的实现的话，我们可以考虑使用定时器setTimeout来计算每个动画的时间再播放下一个动画，可是这是比较麻烦的一种做法。

这里我要介绍两个事件API，一个是transitionend，另一个是animationed；前者是监听DOM对象的过渡事件的结束，后者是监听动画事件的结束。通过这两个API，我们就可以通过监听不同的DOM对象，来完成动画的顺序播放了，例如：

wave2.addEventListener('transitionend', () => {
    boom.classList.add('boom-animation')
    boom.style.opacity = 1
})
boom.addEventListener('animationend', () => {
    boom.style.background = '#F4A460'
    document.querySelector('.greet').style.opacity = 1
})
复制代码