继续创作,加速生长!这是我参与「日新计划 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 对象中包含了 offsetXoffsetY 两个特点,经过这两个特点,咱们就能够知道当时鼠标的方位,此刻将爱心的方位也设置为 (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)

结束语

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

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

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

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