【前端】烟雾文字效果（html +js）

阡小年

已于 2022-08-08 17:09:54 修改

阅读量482

点赞数

分类专栏： bilibili视频源码文章标签： javascript css html 前端

于 2022-07-05 16:21:42 首次发布

本文链接：https://blog.csdn.net/weixin_45562037/article/details/125622436

版权

bilibili视频源码专栏收录该内容

18 篇文章 0 订阅

订阅专栏

视频效果演示：

【css+js】烟雾文字效果

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background: rgb(2, 9, 43);
    }
    section{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    .text{
        position: relative;
        width: 370px;
        text-align: center;
        line-height: 5vh;
        color: white;
    }
    section>.text>span{
        position: relative;
        display: inline-block;
        cursor: pointer;
    }
    section>.text>span.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(30px);
            transform: translateX(300px) translateY(-300px) rotate(720deg) scale(5);
        }
    }
</style>
<body>
    <section>
        <p class="text">
            要控制住自己，最坏的情绪不该带给最重要的人。

            以此轮皎洁的明月，共祝我们拥有长久的欢喜与美梦。

            这路遥马急的人间，你我平安喜乐就好。
         </p>
    </section>
    
</body>

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

    const lrtters = document.querySelectorAll("span");
    for(let i = 0; i<lrtters.length; i++){
        lrtters[i].addEventListener('mouseover',function(){
            lrtters[i].classList.add('active')
        })
    }
</script>
</html>