盒子躲避鼠标
案例原理：在一个大盒子里面放一个图片让它在一个随机的定位，躲避的速率也是随机的。
html,就两个内容一个大盒子 ，里有一个图片，大盒子相对定位，图片绝对定位。
css样式给大盒子一个宽度和高度。盒子样式 就是 border-radius: 100%，颜色自定;
后我们来看代码
一．首先给图片一个随机定位，获取到大盒子的宽减去图片的宽，就是图片横轴上的活动范围，命名为x，以此类推图片竖轴上活动范围命名为y。
二． 然后再确定一个开始的运动趋势，随机数决定的方向。
二．以上两种条件都满足了之后就就开始执行动画效果，首先一个调用 片的css
三．最后关键的一步如果想要图片碰撞到边界都会躲避必须要给它们两个判断条件，修改一下参数即可。
最后我们来看下图片
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码