文字烟雾效果 html+css+js

蔚落 2023-01-18 12:25 245阅读 0赞

## 先看效果（源码在最后）： ##

![在这里插入图片描述][20210506134953132.gif_pic_center]  
网上看到了这个效果，觉得很有趣，所以也实现下，并不难，过程如下：

## 实现过程： ##

#### 1.定义p标签： ####

<p class="text">
            《一个青年艺术家的画像》中的主人公斯蒂芬·迪达勒斯很大程度上象征着乔伊斯自己。
            所有作品中，《一个青年艺术家的画像》作为乔伊斯自传性的小说以其独特和高超的艺术手法而受人推崇。
            小说中的很多细节取材于乔伊斯的早期生活，主人公斯蒂芬·迪达勒斯与乔伊斯的早年经历一样，在孤独中成长，
            最终走向献身艺术的征程。孤独，作为伟人和天才的通病，却恰是艺术家成功的基石。“孤独是本真的心灵存在，
            这是真正艺术生活的根本条件”。
        </p>

#### 2.定义基本全局css样式： ####

*{ 
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body{ 
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(0, 0, 0);
                overflow: hidden;
            }

display: flex;  
justify-content: center;  
align-items: center; flex布局，主要是让 .text盒子在浏览器居中。  
overflow: hidden; 溢出隐藏。

#### 3. 定义.text选择器的css样式： ####

.text{ 
                position: relative;
                width: 700px;
                text-indent: 2em;
                color: rgb(255, 255, 255);
                font-size: 18px;
                cursor: pointer;
                user-select: none;
                text-align: justify;           
            }

position: relative; 相对定位；  
text-indent: 2em; 段落开头空两格；  
cursor: pointer; 鼠标经过样式变为小手。  
user-select: none; 文本不可选中。  
text-align：justify；文本两边对齐。

#### 4. js获取p标签，并且给文本每一个字符都放到一个span标签里。 ####

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

textContent 属性设置或返回指定节点的文本内容。  
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。  
/\\S/g 正则表达式，表示匹配所有非空字符。

#### 5. js获取span标签，并且每一个字符都绑定一个鼠标经过事件。 ####

var arr = document.querySelectorAll("span");
            arr.forEach(function(temp){ 
                temp.addEventListener('mouseover',()=>{ 
                    temp.classList.add('move');
                })
            })

arr为所有span标签的集合数组。  
forEach是循环arr数组。  
给arr数组每一个元素都添加 move这个类名。

#### 6.书写span的基本样式move的样式： ####

.text span{ 
                 position: relative;
                display: inline-block;
                transform-origin: bottom;
                text-indent: 0;
            }
            .text .move{         
                animation: up 2s linear forwards;
            }
            @keyframes up{ 
                100%{ 
                    opacity: 0;
                    filter: blur(20px);
                    transform: translate(600px,-500px) rotate(360deg) scale(5);
                }
            }

display: inline-block; 转为行内块元素。  
transform-origin: bottom;旋转点为底部。  
animation: up 2s linear forwards;设置动画。  
opacity: 0; 透明度变为0.  
filter: blur(20px); 模糊度20px。  
translate(600px,-500px) 偏移。  
rotate(360deg) 旋转  
scale(5) 放大。

## 完整代码： ##

<!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>
        <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background-color: rgb(0, 0, 0); overflow: hidden; } .text{ position: relative; width: 700px; text-indent: 2em; color: rgb(255, 255, 255); font-size: 18px; cursor: pointer; user-select: none; text-align: justify; } .text span{ position: relative; display: inline-block; transform-origin: bottom; text-indent: 0; } .text .move{ animation: up 2s linear forwards; } @keyframes up{ 100%{ opacity: 0; filter: blur(20px); transform: translate(600px,-500px) rotate(360deg) scale(5); } } </style>
    </head>
    <body>
        <p class="text">
            《一个青年艺术家的画像》中的主人公斯蒂芬·迪达勒斯很大程度上象征着乔伊斯自己。
            所有作品中，《一个青年艺术家的画像》作为乔伊斯自传性的小说以其独特和高超的艺术手法而受人推崇。
            小说中的很多细节取材于乔伊斯的早期生活，主人公斯蒂芬·迪达勒斯与乔伊斯的早年经历一样，在孤独中成长，
            最终走向献身艺术的征程。孤独，作为伟人和天才的通病，却恰是艺术家成功的基石。“孤独是本真的心灵存在，
            这是真正艺术生活的根本条件”。
        </p>
        <script> var txt = document.querySelector(".text"); txt.innerHTML = txt.textContent.replace(/\S/g,"<span>$&</span>"); var arr = document.querySelectorAll("span"); arr.forEach(function(temp){ temp.addEventListener('mouseover',()=>{ temp.classList.add('move'); console.log('666'); }) }) </script>
    </body>
    </html>

## 总结： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]

**其它文章：**  
[环绕倒影加载特效 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 1]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 2]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 3]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等等  
[进我主页看更多~][Link 1]

[20210506134953132.gif_pic_center]: /images/20221021/c2e6ca8dce5544898ea2be615d3288e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/f74386acdd1f43208d2d957cd4c4c354.png
[html_css]: https://blog.csdn.net/luo1831251387/article/details/115534417
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630
[Link 1]: https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343