国庆快乐，用这个爱心特效来赞给祖国😎

前言

  一年一度的国庆节来了，在这里祝我们的祖国繁荣昌盛，祝各位国庆快乐。既然是国庆节，当然少不了给祖国献上一份礼物。在这里，我用爱心特效来给我们的祖国赞一个。

效果展示

实现思路

  从效果图上不难看出，爱心随着鼠标的移动而移动，这里的爱心是一张图片。当鼠标放到屏幕上并开始移动时，便会生成已经准备好的爱心图片。整体实现是由 JS 和 CSS 实现的，关键部分是 JS 代码。这里将 JS 代码写到了index.html文件夹。

JS 部分

  JS 部分是这里实现的关键代码。JS 作为三件套之一，有着与网页进行交互的作用。在这里用到了很多 DOM 操作，比如 querySelector() 方法，返回匹配的选择器的第一个元素；createElement() 方法，通过指定标签创建一个元素；等等。这里很多 DOM 操作我也是第一次使用或者接触，因此对我来说也是一个学习的过程。

  JS 部分代码如下，下面会来一段一段解释相关代码的作用。

 <script>
    document.addEventListener('mousemove',(e)=>{
        let body = document.querySelector('body')
        let aixin = document.createElement('span')
        let x = e.offsetX
        let y = e.offsetY
        aixin.style.left = x + 'px'
        aixin.style.top = y + 'px'
        let size = Math.random()*100
        aixin.style.width = size + 'px'
        aixin.style.height = size + 'px'
        body.appendChild(aixin)
        setTimeout(()=>{
            aixin.remove()
        },2000)
    })
   </script> 

  使用 addEventListener 添加指定事件，在这里添加 mousemove 事件，该事件是指当鼠标在元素上移动时，mousemove 事件被触发。然后设置 querySelector()、createElement() 相关 DOM 操作，在这里通过 createElement() 创建 span 元素，因此在整个 index.html 文件中并没有添加其他的 HTML 元素，仅仅只有 JS 代码。

let body = document.querySelector('body')
let aixin = document.createElement('span')

  其次，引入一个新知识 —— offsetX/offsetY，这两个属性的意思是返回鼠标相对于目标元素的 X 坐标或者 Y 坐标。简单点理解就是如果想要获取 X 坐标或者 Y 坐标，就可以使用这个属性。然后通过 random 函数来生成随机大小，并将随机大小赋给宽高。

 let x = e.offsetX
 let y = e.offsetY
 aixin.style.left = x + 'px'
 aixin.style.top = y + 'px'
 let size = Math.random()*100
 aixin.style.width = size + 'px'
 aixin.style.height = size + 'px'

  最后，以上这些完成后，需要将爱心添加到 body 中，这里就要用到另一个 DOM 操作 —— appendChild()，该操作的意思是向节点添加最后一个子节点。所以这里是指向 body 添加名为 aixin 的节点，这样就算是完成了90%。因为还有最后一步，就是设置定时器。为什么要设置定时器呢？在效果图中大家能看到在不断移动鼠标的过程中，前面生成的爱心也会逐渐消失，这就是通过定时器以及后期 CSS 中的动画设置来达到此效果的。remove() 方法可以移除被选元素，包括所有文本和子节点。

 body.appendChild(aixin)
 setTimeout(()=>{
     aixin.remove()
 },2000)

CSS 部分

  CSS 部分就是编写相关样式，从效果图上也能看出，这里的样式并不复杂。并且主要是对生成的 span 编写相关样式

  对整体做样式 Reset（重置）

*{
    margin: 0;
    padding: 0;
    font-family: '微软雅黑',sans-serif;
}
body{
    height: 100vh;
    background: white;
    overflow: hidden;
}

  在 JS 中生成 span 标签，一个 span 代表一个爱心，因此在 span 中加入背景图片。

span{
    position: absolute;
    background: url('aixin.png');
    pointer-events: none;
    transform: translate(-50%,-50%);
    animation: animate 2s linear ;
    width: 100px; 
    height: 100px;
    background-size: cover;
}

总结

  这个爱心特效够赞嘛，够赞的话也可以给我来个小小的赞吧😎！其实除了爱心，还能用其他图片来代替爱心，关键是要理解 JS 部分代码，JS 部分是整个过程中最关键的，有了这 JS 部分，就可以来自由发挥了。