文字烟雾效果 html+css+js

Posted 北极光之夜。

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文字烟雾效果 html+css+js相关的知识,希望对你有一定的参考价值。

先看效果(源码在最后):

在这里插入图片描述
网上看到了这个效果,觉得很有趣,所以也实现下,并不难,过程如下:

实现过程:

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>

总结:

在这里插入图片描述

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

以上是关于文字烟雾效果 html+css+js的主要内容,如果未能解决你的问题,请参考以下文章

smoke.js是一款基于HTML5 Canvas的逼真烟雾特效js插件。通过该js插件,可以非常轻松的在页面中制作出各种烟雾效果。

Amazing!!CSS 也能实现烟雾效果?

CSS代码片段

CSS代码片段

HTML+CSS+JS实现 ❤️透明的水滴文字背景特效❤️

求Jquery或js一行文字跑马灯代码