JavaScript实现心形div块跟随鼠标移动(幻影效果)

港控/mmm° 2023-02-14 13:14 100阅读 0赞

## JavaScript实现心形div块跟随鼠标移动(幻影效果) ##

上篇博客讲解了怎样利用JavaScript实现一串div块跟随鼠标指针移动，然后有轩辕问我，想给女朋友做一个好看的可不可以。现在我们来实现一串心形的div实现跟随鼠标的效果。如图：

![在这里插入图片描述][20200603014300186.gif_pic_center]  
**HTML代码:**

**CSS代码：**

*{ 
                margin: 0;
                padding: 0;
            }
            .box:nth-of-type(n){ 
                width: 10px;
                height: 10px;
                background: red;
                border-radius: 50%;;
                position: absolute;
            }
            .box:nth-of-type(n):after{ 
                display: block;
                width: 10px;
                height: 10px;
                background: red;
                border-radius: 50%;
                position: absolute;
                left: 6px;
                content: "";
            }
            .box:nth-of-type(n):before{ 
                display: block;
                width: 10px;
                height: 10px;
                background: red;
                transform: rotate(45deg);
                position: absolute;
                left: 3px;
                top: 3px;
                content: "";
            }
            .box:nth-of-type(2n){ 
                width: 10px;
                height: 10px;
                background: yellow;
                border-radius: 50%;;
                position: absolute;
            }
            .box:nth-of-type(2n):after{ 
                display: block;
                width: 10px;
                height: 10px;
                background: yellow;
                border-radius: 50%;
                position: absolute;
                left: 6px;
                content: "";
            }
            .box:nth-of-type(2n):before{ 
                display: block;
                width: 10px;
                height: 10px;
                background: yellow;
                transform: rotate(45deg);
                position: absolute;
                left: 3px;
                top: 3px;
                content: "";
            }
            .box:nth-of-type(3n){ 
                width: 10px;
                height: 10px;
                background: skyblue;
                border-radius: 50%;;
                position: absolute;
            }
            .box:nth-of-type(3n):after{ 
                display: block;
                width: 10px;
                height: 10px;
                background: skyblue;
                border-radius: 50%;
                position: absolute;
                left: 6px;
                content: "";
            }
            .box:nth-of-type(3n):before{ 
                display: block;
                width: 10px;
                height: 10px;
                background: skyblue;
                transform: rotate(45deg);
                position: absolute;
                left: 3px;
                top: 3px;
                content: "";
            }
            .box:nth-of-type(4n){ 
                width: 10px;
                height: 10px;
                background: green;
                border-radius: 50%;;
                position: absolute;
            }
            .box:nth-of-type(4n):after{ 
                display: block;
                width: 10px;
                height: 10px;
                background: green;
                border-radius: 50%;
                position: absolute;
                left: 6px;
                content: "";
            }
            .box:nth-of-type(4n):before{ 
                display: block;
                width: 10px;
                height: 10px;
                background: green;
                transform: rotate(45deg);
                position: absolute;
                left: 3px;
                top: 3px;
                content: "";
            }
            .box:nth-of-type(5n){ 
                width: 10px;
                height: 10px;
                background: pink;
                border-radius: 50%;;
                position: absolute;
            }
            .box:nth-of-type(5n):after{ 
                display: block;
                width: 10px;
                height: 10px;
                background: pink;
                border-radius: 50%;
                position: absolute;
                left: 6px;
                content: "";
            }
            .box:nth-of-type(5n):before{ 
                display: block;
                width: 10px;
                height: 10px;
                background: pink;
                transform: rotate(45deg);
                position: absolute;
                left: 3px;
                top: 3px;
                content: "";
            }

**JS代码：**

**关注我，学习前端不迷路！！！**

[20200603014300186.gif_pic_center]: https://img-blog.csdnimg.cn/20200603014300186.gif#pic_center