preface

I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

No good ideas and a certain amount of technical accumulation, but still thinking to participate in the activity, a simple CSS small animation, small creativity, the importance of participation, everyone a happy Mid-Autumn Festival, in case of good luck will get a consolation prize (funny)

Here I use CSS and animation and some transitions to achieve a moonshot effect, js as a tutorial to add some class names or set some properties.

implementation

This effect is actually not difficult, just use a lot of animation to set the box-shadow property and the Transforn property, and you can complete this simple little animation.

Big Moon First draw a big moon, this is actually a div, put it in the upper left corner, add a flashing effect;

Wukong Wukong is a picture I found in Baidu. I put it in the lower right corner, which is easy to complete through positioning.

Here, I drew a white original form through a div, and then adjusted the box-shadow by setting the animation to complete a dynamic wave effect. The code is as follows:

@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; }}Copy the code

Emission emission is a transition effect to make the width of the “wave” wider. The important thing to note here is that we should position the “wave” with “right”, so that as we increase the width, it will gradually become wider from the right to the left.

Exploding The moon explodes by constantly animating the scale.

The coherence of animation mentioned above is the realization of each part of the animation, but to make these animations next to each other, we can consider using timer setTimeout to calculate the time of each animation and then play the next animation, but this is a rather troublesome approach.

Here I will introduce two event apis, one is transitionEnd and the other is animationed; The former listens for the end of a transition event for a DOM object, and the latter listens for the end of an animation event. Using these two apis, we can perform sequential playback of animations by listening on different DOM objects, for example:

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
})
Copy the code

conclusion

Ha ha ha, this animation is actually not difficult, just a sudden idea to use CSS to simply implement, FOUND that CSS is actually quite interesting, through this interaction again learned the following knowledge:

  • transition
  • animation
  • Transitionend event
  • Animationend event

Hydrological complete!