occupy the pit. The form part has not been implemented yet. The animation of the background layer is not implemented.
the technical point is clip-path animation. The text layers of "Welcome back" and "Hello friends" on the right cannot be cut off if you don't use clip-path, to move left and right. If the parent container defined by absolute + overflow hidden, is moving, the exit animation is difficult to achieve. Not to mention the background of many layers below is also moving. So clip-path is a better choice.
this kind of thing is better. If you send this to the developer as a product manager, you have an 80% chance of being beaten.
first you need to set up 2 layers, the lower layer, to put the login form. The upper layer has a color layer. At this level, you can set absolute, and add z-index to control the implementation.
secondly, the lower layer is the movement of a square, and there is nothing special. There is a color layer above, and you can see that it is a movement with a damping effect. You can do two animations, one is to move, the other is to change the width of this effect, you can try to use animation, and then change the function of a Besar curve, which requires you to set the value of animation-timing-funcation. You can call up the desired curve Besar curve
button is similar to that of the upper layer.
about the click effect is the problem of directly zooming in and out of a circle.