烟雾文字动画效果_css烟雾效果-CSDN博客

本文链接：https://blog.csdn.net/qq_33003143/article/details/133699781

本文介绍了如何使用CSS的transform属性、transform-origin和烟雾文字效果，配合页面布局，实现段落文字的动态烟雾动画。通过span标签和mouseover事件，创建了从清晰到模糊的动画过程。附有完整代码下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示

在这里插入图片描述

CSS 知识点

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

整体页面结构布局实现

<section>
  <p class="text">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolore
    voluptas incidunt exercitationem. Consectetur fugiat voluptas expedita
    reprehenderit eius, dicta exercitationem veritatis eos cumque facilis
    assumenda 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);
  }
}