Everyone must have played the ghost throwing game. Today I want to share with you how to use jQuery to achieve the animation effect of the ghost throwing () how to implement a Custom Animation Function Based on CSS background image switching: When the slider throws, use the animate () function of jQuery to change the animation displacement and add a delay effect to the center, then, the animation stops when the animation runs to the randomly generated number of points and displays the number of dropped points. In fact, the animation process adds multiple frames of different images (the same as the frames in flash animated films). The more frames, the better the effect. Then, after frame-by-frame operation, the animation effect is formed.
I. Preparations
Used as the background image.
This is required to load the jQuery library.
The Code is as follows: