WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

文字烟雾效果 html+css+js

更新时间:2021-05-06 16:52 作者:北极光之夜点击:
先看效果(源码在最后):
 
网上看到了这个效果,觉得很有趣,所以也实现下,并不难,过程如下:
 
实现过程:
 
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>");
1
2
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 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>
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容