其他
【每日一练】57— 写一个文本烟雾消失动画效果
今天练习一个JavaScript实现的文本动画效果，效果很有趣，如果对于有阅读“困难症”，把这个效果应用在上面，是不是会比较友好一点，阅读过的内容，都消失了，剩下就是没有阅读的内容，如果还想继续阅读前面消失的内容，只要再次点击任意空白处，内容就全部回来了，这样给阅读带来了一些乐趣。
当然，这个只是我的一个设想，对于真正热爱阅读的人，不需要这样，因为这样做会妨碍他的阅读注意力。
好了，不做假设了，具体每一个效果应用在什么地方，都会有一定规则，现在，我们还是一起来看一下今天练习的最终效果：
<!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>*{ 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); }}写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号