文字烟雾效果 html+css+js

最新推荐文章于 2024-08-16 08:32:26 发布

原创

最新推荐文章于 2024-08-16 08:32:26 发布 · 4.3k 阅读

44 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #js #css3

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

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

实现过程：

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;           
        }