今天練習一個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);
}
} 寫在最後
以上就是今天【每日一練】的全部内容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。