烟雾文字动画效果

news2024/11/17 22:22:01

效果展示

在这里插入图片描述

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);
  }
}