继续创作，加速生长！这是我参与「日新计划 10 月更文应战」的第14天，点击查看活动详情

前语

最近大降温，才意识到秋天是真的来了。古人有诗云：“眉如青山黛，眼似秋波横。”这足以说明秋天的水是多么的浪漫、多情、温顺。

秋天都懂得浪漫，你天天被人说迟钝，何不做点改动？今日我来教咱们属于程序员的浪漫——使用 CSS 调配 JS 完成爱心跟从鼠标发散作用。

增加文字

首先当然要将咱们的文字增加上去啦。

<body>
    <div id="text">CatWatermelon</div>
</body>

很简单是不是，这才开端呢，咱们接下来制作布景先。

制作布景

首先老规矩，咱们将 CSS 款式重置 ，方便各个浏览器统一展现作用。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ps：咱们开发的时分可不敢这么写，要不代码是上午写的，桶是下午提的了。

接下来经过增加 min-height: 100vh 特点，将 body 限制为 视口巨细 且经过 overflow: hidden 来将 超出部分隐藏 。

body {
    min-height: 100vh;
    background-color: #111;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

注意这里用了 flex 布局完成了 水平笔直居中。小伙伴们平时喜欢什么办法来完成这个作用呢？

咱们开端正戏前，先看看目前的作用：

浪漫限制！CSS 完成爱心跟从鼠标作用！

没啥问题，也不应有啥问题，能够接着走了。

爱心生成并跟从

这部分咱们需要考虑三个问题。

三个问题

  1. 怎样生成爱心，什么时分生成？
  2. 生成的爱心怎样跟从鼠标？
  3. 怎样让爱心消失？

爱心生成

咱们一个一个看，首先是生成爱心，爱心咱们能够用一张 透明爱心图片 充任，这里之所以要透明图片是因为防止 body 布景色和图片产生色差，影响美观。具体的，咱们能够用一个容器 span ，将其布景 background 设置为这个爱心图片。如下所示：

span::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    background: url(./static/1.png);
    background-size: cover;
}

那么承载爱心的容器 span 应该在什么时分生成呢？显着的，咱们鼠标移动的时分，会不断的创立小心心，那么咱们应该在鼠标移动事件 mousemove 触发时，在回调中不断的经过 document.createElement 创立 span 。

跟从鼠标

创立好爱心后，咱们为了完成爱心跟从鼠标的作用，应该将新生成的爱心的方位和鼠标方位同步。在 mousemove 事件中，回调函数的入参 e 对象中包含了 offsetX 和 offsetY 两个特点，经过这两个特点，咱们就能够知道当时鼠标的方位，此刻将爱心的方位也设置为 (offsetX, offsetY)，就能够完成爱心跟从的作用了。

爱心消失

爱心消失咱们能够设定一个时间，比如一秒，在上面创立 span 标签时，设置一个 setTimeout 定时器，指定一秒后经过实例调用 remove 办法，就能够完成爱心一秒后消失的作用啦。

document.addEventListener('mousemove', function(e) {
    let body = document.querySelector('body');
    let heart = document.createElement('span');
    let x = e.offsetX;
    let y = e.offsetY;
    heart.style.left = x + 'px';
    heart.style.top = y + 'px';
    body.appendChild(heart);
    setTimeout(() => {
        heart.remove();
    }, 1000)
})

看看作用：

浪漫限制！CSS 完成爱心跟从鼠标作用！

能够发现略微有点僵硬，咱们测验给爱心一个边向后偏移边旋转的动画试试：

span::before {
    ...
    animation: moveShape 1s linear infinite;
}
@keyframes moveShape {
    0% {
        transform: translate(0) rotate(0deg);
    }
    100% {
        transform: translate(300px) rotate(360deg);
    }
}

浪漫限制！CSS 完成爱心跟从鼠标作用！

作用好很多啦，让咱们继续添砖加瓦。

随机巨细

假如咱们能将每个爱心都设置成不同巨细就好了，随机的巨细像冒泡泡一样，显得更可爱。

咱们能够经过一个随机数，来改动爱心容器 span 的巨细。为了让每个 span 巨细不会相差太多，咱们能够用一个 固定宽高 作为基数，然后加上随机得到的一个数，作为终究的宽高。

document.addEventListener('mousemove', function(e) {
    ...
    let size = Math.random() * 80;
    heart.style.width = 20 + size + 'px';
    heart.style.height = 20 + size + 'px';
    body.appendChild(heart);
})

Math.random 办法回来的是 [0, 1) 之间的数，因而咱们乘上一个系数放大 80，才更显着。

咱们来看看此刻的作用：

浪漫限制！CSS 完成爱心跟从鼠标作用！

不错，滋味好极了，啊不，是作用好极了，假如能加点旋转就好了。

让爱心转起来

相同的，咱们能够用刚刚的思路，经过 rotate 特点动态的改动每个爱心的视点。

document.addEventListener('mousemove', function(e) {
    ...
    let transformValue = Math.random() * 360;
    heart.style.transform = `rotate(${transformValue}deg)`;
    body.appendChild(heart);
})

这里的系数咱们要乘 360，表明有 360 的视点能够随机到。此刻咱们再看看作用：

浪漫限制！CSS 完成爱心跟从鼠标作用！

让爱心散开

为了让爱心能更浪漫点，咱们需要将这些爱心在以鼠标坐标为中心，向四周散开。

信任咱们都知道套路，实际上就是改动每个爱心的偏移，那么就要用到动画了。

 span::before {
    ...
    animation: moveShape 1s linear infinite;
}
@keyframes moveShape {
    0% {
        transform: translate(0) rotate(0deg);
    }
    100% {
        transform: translate(300px) rotate(360deg);
    }
}

咱们设置在动画开端到动画结束的过程中，偏移量从 0 至 300px，一起旋转 360。

让咱们看看作用：

浪漫限制！CSS 完成爱心跟从鼠标作用！

能够，已经很棒了。可是还不够，咱们仔细看动图，能够发现爱心消失的很突然，所以咱们接下来要淡化一下这么僵硬的消失作用。

消失动画

为了让爱心消失的不那么突然，咱们能够使用 opacity 调配动画，从 1 到 0 的让爱心慢慢消失。

span {
    ...
    animation: fadeInOut 1s linear infinite;
}
@keyframes fadeInOut {
    0%,100% {
        opacity: 0;
    }
    20%, 80% {
        opacity: 1;
    }
}

看看咱们的终究作用：

浪漫限制！CSS 完成爱心跟从鼠标作用！

Github 源码地址

juejin-demo/heart-demo at main catwatermelon/juejin-demo (github.com)

结束语

至此，本文就到此结束啦，不知道咱们学废了吗？

假如小伙伴们有其他想法，欢迎留言，让咱们一起学习进步。

假如文中有不对的地方，或是咱们有不同的见解，欢迎指出。

假如咱们觉得一切收获，欢迎一键三连。