Description

This is designed and implemented by myself.I can only say that only the first stage of this animation is completed. All I used is animation, transition and other CSS properties. The animation seems to be very smooth, but if you click frequently, it is easy to find problems, so I still have A lot to do. In this exercise, the most interesting thing is the implementation of radio wave. How to achieve a layout with a hollow effect like this?

The method I use is to use a shadow box. I use the shadow box to simulate the effect of the mask, and use

overflow: hidden

to ensure that these shadows do not affect each other. In the future I plan to use framer motion to achieve some effects.