每日记录

今天发现了一个HTML的代码示例。分析了其中的代码css和js。

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>文字烟雾效果</title>

    <style>

        *{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

       div{

            height: 100vh;

            display: flex;

            justify-content: center;

            align-items: center;

            background-color: rgb(0, 0, 0);

            overflow: hidden;

        }

        .text{

            position: relative;

            width: 500px;

            text-indent: 2em;

            color: rgb(255, 255, 255);

            font-size: 28px;

            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>

<input type="button" value="重新加载页面" onclick="reloadPage()" >

<p> 移动鼠标滑过下面的文字</p> 

<div>

<p class="text">往事如烟  总是在太迟了的时候  

才会珍惜  那一种无奈的感悟  总是在孤独的路途上  

才会纪念  有段一去不复返的岁月 </p>

<div>

 

 <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');

            })

        })

        //重载页面

        function reloadPage() {

             window.location.reload();

        }   

    </script>

</body>

</html>

posted @ 2023-04-23 22:01  傲世小苦瓜  阅读(6)  评论(0)    收藏  举报