效果展示

CSS 知识点

• transform 属性运用
• transform-origin 属性运用
• 烟雾文字实现

整体页面结构布局实现

<section><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolorevoluptas incidunt exercitationem. Consectetur fugiat voluptas expeditareprehenderit eius, dicta exercitationem veritatis eos cumque facilisassumenda explicabo, rerum possimus tempore.</p>
</section>

段落文字拆分为单个单词的 span 标签

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", () => {letters[i].classList.add("active");});
}

实现烟雾文字动画

section .text span.active {/* 使用transform 属性的 translateX、translateY、rotate和scale值来绘制从清晰文字到烟雾文字的动画 */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);}
}

完整代码下载

完整代码下载