实现内容是在页面中有20个小心心惢在随机移动(移动方向随机 位置随机 颜色随机 旋转方向随机)觉得好看的话,加在你的网页上吧!要实现这个效果用到了html,cssjs知识。实现的难点主要有如下:
- 随机产生移动方向旋转方向等
在小心心心的绘制上,小白的我也是想了很长时间因为要作为背景,并且移動用canvas画布就比较费时费力。这里我时用两个圆形加一个旋转90°的正方形实现的。如图所示
所以只需要三个标签并分别设置标签的样式即設置标签绝对定位,以heart为父元素进行定位如此在小心心心移动的时候,只需要改变父元素的位置即可
最重要的js逻辑实现:
1. 首先写一个创建dom元素的函数,因为每一个小心心心都需要创建相同的dom元素我们在这里把它封装成一个函数。
下面这两个方法是用于获取当前小心心心的位置或小心心心结束位置。将随机生成的数乘以浏览器窗口的大小使小心心心不会挪出窗口
下面就是js的核心代码啦,在这里我就把解释寫在代码里了
以上就是这个小心心心demo的代码及解释啦。