今天练习一个JavaScript实现的文本动画效果，效果很有趣，如果对于有阅读“困难症”，把这个效果应用在上面，是不是会比较友好一点，阅读过的内容，都消失了，剩下就是没有阅读的内容，如果还想继续阅读前面消失的内容，只要再次点击任意空白处，内容就全部回来了，这样给阅读带来了一些乐趣。
当然，这个只是我的一个设想，对于真正热爱阅读的人，不需要这样，因为这样做会妨碍他的阅读注意力。
好了，不做假设了，具体每一个效果应用在什么地方，都会有一定规则，现在，我们还是一起来看一下今天练习的最终效果：
下面我们再来看具体的实现代码。
HTML代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>【每日一练】57— 写一个文本烟雾消失动画效果</title>
</head>
<body>
<section>
<p class="text">消费型思维与投资型思维的人，
消费型思维的人，看重的是买买买的本身，投资型思维的人，买买买只是第一步，买买买后面的投资回报才是重点。
消费型思维与投资型思维的人，
消费型思维的人，看重的是买买买的本身，
投资型思维的人，买买买只是第一步，
买买买后面的投资回报才是重点。</p>
</section>
<script>
const text = document.querySelector('.text');
text.innerHTML = text.textContent.replace(/\S/g,"<span>$&</span>");
const letters = document.querySelectorAll('span');
for (let i=0; i<letters.length; i++){
letters[i].addEventListener("mouseover", function(){
letters[i].classList.add('active')
})
}
</script>
</body>
</html>
CSS代码：
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
section
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #111;
overflow: hidden;
}
section .text
{
position: relative;
color: #fff;
margin: 40px;
max-width: 800px;
user-select: none;
font-size: 1.5em;
line-height:1.8em;
letter-spacing:5px;
}
section .text span
{
position: relative;
display: inline-block;
cursor: pointer;
}
section .text span.active
{
animation: smoke 2s linear forwards;
transform-origin: bottom;
}
@keyframes smoke
{
0%
{
opacity: 1;
filter: blur(0);
transform: translateX(0) translateY(0) rotate(0deg) scale(1);
}
50%
{
opacity: 1;
pointer-events: none;
}
100%
{
opacity: 0;
filter: blur(20px);
transform: translateX(300px) translateY(-300px) rotate(720deg) scale(4);
}
}
写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
