<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ background: #111111; height: 100vh; display: flex; justify-content: center; align-items: center; } div .text{ color: #ffffff; user-select: none; } span{ display: inline-block; } .active{ animation: smoke 2s linear forwards; } @keyframes smoke { 0% { opacity: 1; filter: blur(0); transform: translateX(0) translateY(0) rotate(0deg) scale(1); } 100% { opacity: 0; filter: blur(20px); transform: translateX(300px) translateY(-300px) rotate(720deg) scale(8); } } </style> </head> <body> <div> <p class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi a ssumenda dolores ex mollitia nisi rerum soluta sunt tempore, tenetur voluptates? A des erunt, esse iste nulla odio quibusdam quidem quos voluptates! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi a ssumenda dolores ex mollitia nisi rerum soluta sunt tempore, tenetur voluptates? A des erunt, esse iste nulla odio quibusdam quidem quos voluptates! </p> </div> <script> const text = document.querySelector('.text') text.innerHTML = text.textContent.replace(/w/g,'<span>$&</span>') const allSpan = document.querySelectorAll('span') allSpan.forEach( i =>{ i.addEventListener('mouseover',function (){ i.classList.add('active') }) }) </script> </body> </html>