继续创作,加速生长!这是我参与「日新计划 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
布局完成了 水平笔直居中。小伙伴们平时喜欢什么办法来完成这个作用呢?
咱们开端正戏前,先看看目前的作用:
没啥问题,也不应有啥问题,能够接着走了。
爱心生成并跟从
这部分咱们需要考虑三个问题。
三个问题
- 怎样生成爱心,什么时分生成?
- 生成的爱心怎样跟从鼠标?
- 怎样让爱心消失?
爱心生成
咱们一个一个看,首先是生成爱心,爱心咱们能够用一张 透明爱心图片 充任,这里之所以要透明图片是因为防止 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)
})
看看作用:
能够发现略微有点僵硬,咱们测验给爱心一个边向后偏移边旋转的动画试试:
span::before {
...
animation: moveShape 1s linear infinite;
}
@keyframes moveShape {
0% {
transform: translate(0) rotate(0deg);
}
100% {
transform: translate(300px) rotate(360deg);
}
}
作用好很多啦,让咱们继续添砖加瓦。
随机巨细
假如咱们能将每个爱心都设置成不同巨细就好了,随机的巨细像冒泡泡一样,显得更可爱。
咱们能够经过一个随机数,来改动爱心容器 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,才更显着。
咱们来看看此刻的作用:
不错,滋味好极了,啊不,是作用好极了,假如能加点旋转就好了。
让爱心转起来
相同的,咱们能够用刚刚的思路,经过 rotate
特点动态的改动每个爱心的视点。
document.addEventListener('mousemove', function(e) {
...
let transformValue = Math.random() * 360;
heart.style.transform = `rotate(${transformValue}deg)`;
body.appendChild(heart);
})
这里的系数咱们要乘 360,表明有 360 的视点能够随机到。此刻咱们再看看作用:
让爱心散开
为了让爱心能更浪漫点,咱们需要将这些爱心在以鼠标坐标为中心,向四周散开。
信任咱们都知道套路,实际上就是改动每个爱心的偏移,那么就要用到动画了。
span::before {
...
animation: moveShape 1s linear infinite;
}
@keyframes moveShape {
0% {
transform: translate(0) rotate(0deg);
}
100% {
transform: translate(300px) rotate(360deg);
}
}
咱们设置在动画开端到动画结束的过程中,偏移量从 0 至 300px,一起旋转 360。
让咱们看看作用:
能够,已经很棒了。可是还不够,咱们仔细看动图,能够发现爱心消失的很突然,所以咱们接下来要淡化一下这么僵硬的消失作用。
消失动画
为了让爱心消失的不那么突然,咱们能够使用 opacity
调配动画,从 1 到 0 的让爱心慢慢消失。
span {
...
animation: fadeInOut 1s linear infinite;
}
@keyframes fadeInOut {
0%,100% {
opacity: 0;
}
20%, 80% {
opacity: 1;
}
}
看看咱们的终究作用:
Github 源码地址
juejin-demo/heart-demo at main catwatermelon/juejin-demo (github.com)
结束语
至此,本文就到此结束啦,不知道咱们学废了吗?
假如小伙伴们有其他想法,欢迎留言,让咱们一起学习进步。
假如文中有不对的地方,或是咱们有不同的见解,欢迎指出。
假如咱们觉得一切收获,欢迎一键三连。