第一步：

第二步：

<p class="text">

</p>

其中文字可自行调整，当然要直接复制这段二哥也不介意。

*{

padding: 0;

}

position: relative;

display: flex;

justify-content: center;

background: #111;

section .text{

max-width: 750px;

font-size: 20px;

user-select: none;

}

通过javascrip把text样式中的文字炸成一个一个的<span></span>标签。

// 把text文字大爆炸

text.innerHTML = text.textContent.replace(/\S/g, "<span>$&</span>");// 正则中的s为大写，不然炸不动

第四步：

position: relative;

display: inline-block;

第五步：

// 把text文字大爆炸

text.innerHTML = text.textContent.replace(/\S/g, "<span>$&</span>");

for (let i=0; i<letters.length; i++) {

letters[i].classList.add('active')

}

第六步：

animation: smoker 4s linear forwards;

@keyframes smoker{

opacity: 1;

transform: scale(1) translateX(0) translateY(0) rotate(0);

50%{

pointer-events: none;

100%{

filter: blur(20px);

transform: scale(8) translateX(300px) translateY(-300px) rotate(720deg);

}

总结：这里代码没有标注，如果初学者遇到了看不懂的属性或事件。可以复制搜索引擎查看相应的知识点，一次也许记不住，操作得多了就知道了。到最后还能举一反三，好多以前不理解的知识就会恍然大悟。