Box avoiding mouse

Case principle ： Put a picture in a big box and let it be located randomly , The rate of evasion is also random .

html, Just two contents, a big box , There is a picture in , Relative positioning of large boxes , Absolute positioning of the picture .
css Style gives the big box a width and height . Box style Namely border-radius: 100%, Color customization ;
Then let's look at the code

One ． First, give the picture a random location , Get the width of the big box minus the width of the picture , It is the active range on the horizontal axis of the picture , Name it x, By analogy, the active range on the vertical axis of the picture is named y.

Two ． Then determine an initial movement trend , The direction determined by random numbers .

Two ． When the above two conditions are met, the animation effect will be executed , First call The film css

3、 ... and ． The last key step is to give two criteria if you want the image to avoid colliding with the boundary , Just modify the parameters .

Finally, let's look at the picture