这段代码是一个完整的 HTML 页面，包含了 HTML 结构、CSS 样式和 JavaScript 脚本。页面的主要功能是创建一个动态的文字墙效果，其中的文字会随机移动、变色。

演示效果HTML&CSS &JS：满屏喜欢你能否感动你？

HTML&CSS &JS：满屏喜欢你能否感动你？

HTML&CSS

<span style="color: #61aeee; line-height: 26px;"><!DOCTYPE <span style="line-height: 26px;">html</span>></span>
<span style="line-height: 26px;"><<span style="color: #e06c75; line-height: 26px;">html</span> <span style="color: #d19a66; line-height: 26px;">lang</span>=<span style="color: #98c379; line-height: 26px;">"en"</span>></span>
<span style="line-height: 26px;"><<span style="color: #e06c75; line-height: 26px;">head</span>></span>
    <span style="line-height: 26px;"><<span style="color: #e06c75; line-height: 26px;">meta</span> <span style="color: #d19a66; line-height: 26px;">charset</span>=<span style="color: #98c379; line-height: 26px;">"UTF-8"</span>></span>
    <span style="line-height: 26px;"><<span style="color: #e06c75; line-height: 26px;">meta</span> <span style="color: #d19a66; line-height: 26px;">http-equiv</span>=<span style="color: #98c379; line-height: 26px;">"X-UA-Compatible"</span> <span style="color: #d19a66; line-height: 26px;">content</span>=<span style="color: #98c379; line-height: 26px;">"IE=edge"</span>></span>
    <span style="line-height: 26px;"><<span style="color: #e06c75; line-height: 26px;">meta</span> <span style="color: #d19a66; line-height: 26px;">name</span>=<span style="color: #98c379; line-height: 26px;">"viewport"</span> <span style="color: #d19a66; line-height: 26px;">content</span>=<span style="color: #98c379; line-height: 26px;">"width=device-width, initial-scale=1.0"</span>></span>
    <span style="line-height: 26px;"><<span style="color: #e06c75; line-height: 26px;">title</span>></span>前端Hardy<span style="line-height: 26px;"></<span style="color: #e06c75; line-height: 26px;">title</span>></span>
    <span style="line-height: 26px;"><<span style="color: #e06c75; line-height: 26px;">style</span>></span><span style="line-height: 26px;">
        <span style="color: #e06c75; line-height: 26px;">body</span> {
            <span style="color: #98c379; line-height: 26px;">margin</span>: <span style="color: #d19a66; line-height: 26px;">0</span>;
            <span style="color: #98c379; line-height: 26px;">padding</span>: <span style="color: #d19a66; line-height: 26px;">0</span>;
            <span style="color: #98c379; line-height: 26px;">background</span>: <span style="color: #d19a66; line-height: 26px;">#000</span>;
            <span style="color: #98c379; line-height: 26px;">overflow</span>: hidden;
            <span style="color: #98c379; line-height: 26px;">height</span>: <span style="color: #d19a66; line-height: 26px;">100vh</span>;
            <span style="color: #98c379; line-height: 26px;">display</span>: flex;
            <span style="color: #98c379; line-height: 26px;">justify-content</span>: center;
            <span style="color: #98c379; line-height: 26px;">align-items</span>: center;
        }
        <span style="color: #61aeee; line-height: 26px;">#controls</span> {
            <span style="color: #98c379; line-height: 26px;">position</span>: fixed;
            <span style="color: #98c379; line-height: 26px;">top</span>: <span style="color: #d19a66; line-height: 26px;">10px</span>;
            <span style="color: #98c379; line-height: 26px;">left</span>: <span style="color: #d19a66; line-height: 26px;">10px</span>;
            <span style="color: #98c379; line-height: 26px;">z-index</span>: <span style="color: #d19a66; line-height: 26px;">100</span>;
            <span style="color: #98c379; line-height: 26px;">display</span>: flex;
            <span style="color: #98c379; line-height: 26px;">align-items</span>: center;
        }
        <span style="color: #d19a66; line-height: 26px;">.btn</span> {
            <span style="color: #98c379; line-height: 26px;">background-color</span>: <span style="color: #e6c07b; line-height: 26px;">rgba</span>(<span style="color: #d19a66; line-height: 26px;">0</span>, <span style="color: #d19a66; line-height: 26px;">0</span>, <span style="color: #d19a66; line-height: 26px;">0</span>, <span style="color: #d19a66; line-height: 26px;">0.4</span>);
            <span style="color: #98c379; line-height: 26px;">border</span>: none;
            <span style="color: #98c379; line-height: 26px;">color</span>: <span style="color: #e6c07b; line-height: 26px;">rgba</span>(<span style="color: #d19a66; line-height: 26px;">255</span>, <span style="color: #d19a66; line-height: 26px;">255</span>, <span style="color: #d19a66; line-height: 26px;">255</span>, <span style="color: #d19a66; line-height: 26px;">0.4</span>);
            <span style="color: #98c379; line-height: 26px;">padding</span>: <span style="color: #d19a66; line-height: 26px;">10px</span>;
            <span style="color: #98c379; line-height: 26px;">text-align</span>: center;
            <span style="color: #98c379; line-height: 26px;">text-decoration</span>: none;
            <span style="color: #98c379; line-height: 26px;">display</span>: inline-block;
            <span style="color: #98c379; line-height: 26px;">font-size</span>: <span style="color: #d19a66; line-height: 26px;">16px</span>;
            <span style="color: #98c379; line-height: 26px;">margin</span>: <span style="color: #d19a66; line-height: 26px;">2px</span> <span style="color: #d19a66; line-height: 26px;">2px</span>;
            <span style="color: #98c379; line-height: 26px;">cursor</span>: pointer;
            <span style="color: #98c379; line-height: 26px;">border-radius</span>: <span style="color: #d19a66; line-height: 26px;">5px</span>;
            <span style="color: #98c379; line-height: 26px;">transition</span>: background-color <span style="color: #d19a66; line-height: 26px;">0.3s</span>;
        }
        <span style="color: #d19a66; line-height: 26px;">.btn</span><span style="color: #d19a66; line-height: 26px;">:hover</span> {
            <span style="color: #98c379; line-height: 26px;">background-color</span>: <span style="color: #e6c07b; line-height: 26px;">rgba</span>(<span style="color: #d19a66; line-height: 26px;">255</span>, <span style="color: #d19a66; line-height: 26px;">255</span>, <span style="color: #d19a66; line-height: 26px;">255</span>, <span style="color: #d19a66; line-height: 26px;">0.2</span>);
            <span style="color: #98c379; line-height: 26px;">color</span>: <span style="color: #e6c07b; line-height: 26px;">rgba</span>(<span style="color: #d19a66; line-height: 26px;">255</span>, <span style="color: #d19a66; line-height: 26px;">255</span>, <span style="color: #d19a66; line-height: 26px;">0</span>, <span style="color: #d19a66; line-height: 26px;">1</span>);
        }
        <span style="color: #61aeee; line-height: 26px;">#fullscreenBtn</span> {
            <span style="color: #98c379; line-height: 26px;">font-size</span>: <span style="color: #d19a66; line-height: 26px;">20px</span>;
        }
        <span style="color: #d19a66; line-height: 26px;">.textwall-night</span> {
            <span style="color: #98c379; line-height: 26px;">width</span>: <span style="color: #d19a66; line-height: 26px;">100vw</span>;
            <span style="color: #98c379; line-height: 26px;">height</span>: <span style="color: #d19a66; line-height: 26px;">100vh</span>;
            <span style="color: #98c379; line-height: 26px;">position</span>: relative;
            <span style="color: #98c379; line-height: 26px;">overflow</span>: hidden;
        }
        <span style="color: #d19a66; line-height: 26px;">.text-piece</span> {
            <span style="color: #98c379; line-height: 26px;">position</span>: absolute;
            <span style="color: #98c379; line-height: 26px;">font-size</span>: <span style="color: #d19a66; line-height: 26px;">12px</span>;
            <span style="color: #98c379; line-height: 26px;">line-height</span>: <span style="color: #d19a66; line-height: 26px;">1</span>;
            <span style="color: #98c379; line-height: 26px;">color</span>: transparent;
            <span style="color: #98c379; line-height: 26px;">text-shadow</span>: none;
            <span style="color: #98c379; line-height: 26px;">animation</span>: twinkle <span style="color: #d19a66; line-height: 26px;">1.5s</span> infinite alternate, moveOutward <span style="color: #d19a66; line-height: 26px;">10s</span> linear infinite,
                colorChange <span style="color: #d19a66; line-height: 26px;">4s</span> infinite;
            <span style="color: #98c379; line-height: 26px;">font-family</span>: monospace;
            <span style="color: #98c379; line-height: 26px;">white-space</span>: nowrap;
        }
        <span style="color: #c678dd; line-height: 26px;">@keyframes</span> twinkle {
            0% {
                <span style="color: #98c379; line-height: 26px;">opacity</span>: <span style="color: #d19a66; line-height: 26px;">0.7</span>;
            }
            100% {
                <span style="color: #98c379; line-height: 26px;">opacity</span>: <span style="color: #d19a66; line-height: 26px;">1</span>;
            }
        }
        <span style="color: #c678dd; line-height: 26px;">@keyframes</span> moveOutward {
            0% {
                <span style="color: #98c379; line-height: 26px;">transform</span>: <span style="color: #e6c07b; line-height: 26px;">translate</span>(<span style="color: #d19a66; line-height: 26px;">0</span>, <span style="color: #d19a66; line-height: 26px;">0</span>) <span style="color: #e6c07b; line-height: 26px;">rotate</span>(<span style="color: #d19a66; line-height: 26px;">0deg</span>);
            }
            100% {
                <span style="color: #98c379; line-height: 26px;">transform</span>: <span style="color: #e6c07b; line-height: 26px;">translate</span>(var(--tx), <span style="color: #e6c07b; line-height: 26px;">var</span>(--ty)) <span style="color: #e6c07b; line-height: 26px;">rotate</span>(<span style="color: #d19a66; line-height: 26px;">360deg</span>);
            }
        }
        <span style="color: #c678dd; line-height: 26px;">@keyframes</span> colorChange {
            0% {
                <span style="color: #98c379; line-height: 26px;">color</span>: <span style="color: #d19a66; line-height: 26px;">#4a437f</span>;
                <span style="color: #98c379; line-height: 26px;">text-shadow</span>: <span style="color: #d19a66; line-height: 26px;">0</span> <span style="color: #d19a66; line-height: 26px;">0</span> <span style="color: #d19a66; line-height: 26px;">5px</span> <span style="color: #d19a66; line-height: 26px;">#4a437f</span>;
            }
            20% {
                <span style="color: #98c379; line-height: 26px;">color</span>: <span style="color: #d19a66; line-height: 26px;">#6f75aa</span>;
                <span style="color: #98c379; line-height: 26px;">text-shadow</span>: <span style="color: #d19a66; line-height: 26px;">0</span> <span style="color: #d19a66; line-height: 26px;">0</span> <span style="color: #d19a66; line-height: 26px;">5px</span> <span style="color: #d19a66; line-height: 26px;">#6f75aa</span>;
            }
            40% {
                <span style="color: #98c379; line-height: 26px;">color</span>: <span style="color: #d19a66; line-height: 26px;">#fff5bd</span>;
                <span style="color: #98c379; line-height: 26px;">text-shadow</span>: <span style="color: #d19a66; line-height: 26px;">0</span> <span style="color: #d19a66; line-height: 26px;">0</span> <span style="color: #d19a66; line-height: 26px;">5px</span> <span style="color: #d19a66; line-height: 26px;">#fff5bd</span>;
            }
            60% {
                <span style="color: #98c379; line-height: 26px;">color</span>: <span style="color: #d19a66; line-height: 26px;">#ffd966</span>;
                <span style="color: #98c379; line-height: 26px;">text-shadow</span>: <span style="color: #d19a66; line-height: 26px;">0</span> <span style="color: #d19a66; line-height: 26px;">0</span> <span style="color: #d19a66; line-height: 26px;">5px</span> <span style="color: #d19a66; line-height: 26px;">#ffd966</span>;
            }
            80% {
                <span style="color: #98c379; line-height: 26px;">color</span>: <span style="color: #d19a66; line-height: 26px;">#466b91</span>;
                <span style="color: #98c379; line-height: 26px;">text-shadow</span>: <span style="color: #d19a66; line-height: 26px;">0</span> <span style="color: #d19a66; line-height: 26px;">0</span> <span style="color: #d19a66; line-height: 26px;">5px</span> <span style="color: #d19a66; line-height: 26px;">#466b91</span>;
            }
            100% {
                <span style="color: #98c379; line-height: 26px;">color</span>: <span style="color: #d19a66; line-height: 26px;">#4a437f</span>;
                <span style="color: #98c379; line-height: 26px;">text-shadow</span>: <span style="color: #d19a66; line-height: 26px;">0</span> <span style="color: #d19a66; line-height: 26px;">0</span> <span style="color: #d19a66; line-height: 26px;">5px</span> <span style="color: #d19a66; line-height: 26px;">#4a437f</span>;
            }
        }
    </span><span style="line-height: 26px;"></<span style="color: #e06c75; line-height: 26px;">style</span>></span>
<span style="line-height: 26px;"></<span style="color: #e06c75; line-height: 26px;">head</span>></span>
<span style="line-height: 26px;"><<span style="color: #e06c75; line-height: 26px;">body</span>></span>
    <span style="line-height: 26px;"><<span style="color: #e06c75; line-height: 26px;">div</span> <span style="color: #d19a66; line-height: 26px;">id</span>=<span style="color: #98c379; line-height: 26px;">"controls"</span>></span>
        <span style="line-height: 26px;"><<span style="color: #e06c75; line-height: 26px;">button</span> <span style="color: #d19a66; line-height: 26px;">id</span>=<span style="color: #98c379; line-height: 26px;">"fullscreenBtn"</span> <span style="color: #d19a66; line-height: 26px;">class</span>=<span style="color: #98c379; line-height: 26px;">"btn"</span> <span style="color: #d19a66; line-height: 26px;">title</span>=<span style="color: #98c379; line-height: 26px;">"Toggle Fullscreen"</span>></span>⤢<span style="line-height: 26px;"></<span style="color: #e06c75; line-height: 26px;">button</span>></span>
    <span style="line-height: 26px;"></<span style="color: #e06c75; line-height: 26px;">div</span>></span>
    <span style="line-height: 26px;"><<span style="color: #e06c75; line-height: 26px;">div</span> <span style="color: #d19a66; line-height: 26px;">class</span>=<span style="color: #98c379; line-height: 26px;">"textwall-night"</span>></span><span style="line-height: 26px;"></<span style="color: #e06c75; line-height: 26px;">div</span>></span>
    <span style="line-height: 26px;"><<span style="color: #e06c75; line-height: 26px;">script</span>></span><span style="line-height: 26px;">
        <span style="color: #c678dd; line-height: 26px;">let</span> loremText = <span style="color: #98c379; line-height: 26px;">""</span>;
        <span style="color: #c678dd; line-height: 26px;">for</span> (<span style="color: #c678dd; line-height: 26px;">let</span> i = <span style="color: #d19a66; line-height: 26px;">0</span>; i < <span style="color: #d19a66; line-height: 26px;">51</span>; i++) {
            loremText += <span style="color: #98c379; line-height: 26px;">"喜欢你"</span>;
            <span style="color: #c678dd; line-height: 26px;">if</span> (i < <span style="color: #d19a66; line-height: 26px;">49</span>) {
                loremText += <span style="color: #98c379; line-height: 26px;">"，"</span>;
            }
        }
        <span style="color: #e6c07b; line-height: 26px;">console</span>.log(loremText);
        <span style="color: #c678dd; line-height: 26px;">const</span> quantity = <span style="color: #d19a66; line-height: 26px;">150</span>;
        <span style="color: #c678dd; line-height: 26px;">const</span> colors = [
            <span style="color: #98c379; line-height: 26px;">"#4a437f"</span>,
            <span style="color: #98c379; line-height: 26px;">"#6f75aa"</span>,
            <span style="color: #98c379; line-height: 26px;">"#fff5bd"</span>,
            <span style="color: #98c379; line-height: 26px;">"#ffd966"</span>,
            <span style="color: #98c379; line-height: 26px;">"#c7b683"</span>,
            <span style="color: #98c379; line-height: 26px;">"#466b91"</span>,
            <span style="color: #98c379; line-height: 26px;">"#2d4263"</span>
        ];
        <span style="color: #c678dd; line-height: 26px;">const</span> textwall = <span style="color: #e6c07b; line-height: 26px;">document</span>.querySelector(<span style="color: #98c379; line-height: 26px;">".textwall-night"</span>);
        <span style="color: #c678dd; line-height: 26px;">let</span> width = <span style="color: #e6c07b; line-height: 26px;">window</span>.innerWidth;
        <span style="color: #c678dd; line-height: 26px;">let</span> height = <span style="color: #e6c07b; line-height: 26px;">window</span>.innerHeight;
        <span style="color: #c678dd; line-height: 26px;">for</span> (<span style="color: #c678dd; line-height: 26px;">let</span> i = <span style="color: #d19a66; line-height: 26px;">0</span>; i < quantity; i++) {
            <span style="color: #c678dd; line-height: 26px;">const</span> piece = <span style="color: #e6c07b; line-height: 26px;">document</span>.createElement(<span style="color: #98c379; line-height: 26px;">"div"</span>);
            piece.className = <span style="color: #98c379; line-height: 26px;">"text-piece"</span>;
            <span style="color: #c678dd; line-height: 26px;">const</span> t = i * <span style="color: #d19a66; line-height: 26px;">0.1</span>;
            <span style="color: #c678dd; line-height: 26px;">let</span> x = width / <span style="color: #d19a66; line-height: 26px;">2</span> + ((<span style="color: #e6c07b; line-height: 26px;">Math</span>.cos(t) * (t * <span style="color: #d19a66; line-height: 26px;">2</span>)) % width);
            <span style="color: #c678dd; line-height: 26px;">let</span> y = height / <span style="color: #d19a66; line-height: 26px;">2</span> + ((<span style="color: #e6c07b; line-height: 26px;">Math</span>.sin(t) * (t * <span style="color: #d19a66; line-height: 26px;">2</span>)) % height);
            <span style="color: #c678dd; line-height: 26px;">const</span> angle = <span style="color: #e6c07b; line-height: 26px;">Math</span>.random() * <span style="color: #e6c07b; line-height: 26px;">Math</span>.PI * <span style="color: #d19a66; line-height: 26px;">2</span>;
            <span style="color: #c678dd; line-height: 26px;">const</span> distance = <span style="color: #e6c07b; line-height: 26px;">Math</span>.random() * <span style="color: #d19a66; line-height: 26px;">500</span> + <span style="color: #d19a66; line-height: 26px;">500</span>;
            <span style="color: #c678dd; line-height: 26px;">const</span> tx = <span style="color: #e6c07b; line-height: 26px;">Math</span>.cos(angle) * distance;
            <span style="color: #c678dd; line-height: 26px;">const</span> ty = <span style="color: #e6c07b; line-height: 26px;">Math</span>.sin(angle) * distance;
            piece.style.setProperty(<span style="color: #98c379; line-height: 26px;">"--tx"</span>, <span style="color: #98c379; line-height: 26px;">`<span style="color: #e06c75; line-height: 26px;">${tx}</span>px`</span>);
            piece.style.setProperty(<span style="color: #98c379; line-height: 26px;">"--ty"</span>, <span style="color: #98c379; line-height: 26px;">`<span style="color: #e06c75; line-height: 26px;">${ty}</span>px`</span>);
            piece.style.left = <span style="color: #98c379; line-height: 26px;">`<span style="color: #e06c75; line-height: 26px;">${x}</span>px`</span>;
            piece.style.top = <span style="color: #98c379; line-height: 26px;">`<span style="color: #e06c75; line-height: 26px;">${y}</span>px`</span>;
            piece.style.animationDelay = <span style="color: #98c379; line-height: 26px;">`<span style="color: #e06c75; line-height: 26px;">${<span style="color: #e6c07b; line-height: 26px;">Math</span>.random() * <span style="color: #d19a66; line-height: 26px;">2.5</span>}</span>s`</span>;
            piece.style.fontSize = <span style="color: #98c379; line-height: 26px;">`<span style="color: #e06c75; line-height: 26px;">${<span style="color: #e6c07b; line-height: 26px;">Math</span>.random() * <span style="color: #d19a66; line-height: 26px;">8</span> + <span style="color: #d19a66; line-height: 26px;">12</span>}</span>px`</span>;
            <span style="color: #c678dd; line-height: 26px;">const</span> startPos = <span style="color: #e6c07b; line-height: 26px;">Math</span>.floor(<span style="color: #e6c07b; line-height: 26px;">Math</span>.random() * (loremText.length - <span style="color: #d19a66; line-height: 26px;">20</span>));
            piece.textContent = loremText.substr(startPos, <span style="color: #d19a66; line-height: 26px;">20</span>);
            textwall.appendChild(piece);
        }
        <span style="color: #e6c07b; line-height: 26px;">document</span>.querySelectorAll(<span style="color: #98c379; line-height: 26px;">".text-piece"</span>).forEach(<span style="line-height: 26px;">(<span style="line-height: 26px;">piece</span>) =></span> {
            piece.addEventListener(<span style="color: #98c379; line-height: 26px;">"mouseover"</span>, () => {
                piece.style.transform = <span style="color: #98c379; line-height: 26px;">`scale(1.5)`</span>;
                piece.style.zIndex = <span style="color: #98c379; line-height: 26px;">"1000"</span>;
                piece.style.transition = <span style="color: #98c379; line-height: 26px;">"transform 0.3s ease"</span>;
            });
            piece.addEventListener(<span style="color: #98c379; line-height: 26px;">"mouseout"</span>, () => {
                piece.style.transform = <span style="color: #98c379; line-height: 26px;">""</span>;
                piece.style.zIndex = <span style="color: #98c379; line-height: 26px;">""</span>;
            });
        });
        <span style="color: #c678dd; line-height: 26px;">const</span> fullscreenBtn = <span style="color: #e6c07b; line-height: 26px;">document</span>.getElementById(<span style="color: #98c379; line-height: 26px;">"fullscreenBtn"</span>);
        fullscreenBtn.addEventListener(<span style="color: #98c379; line-height: 26px;">"click"</span>, toggleFullScreen);
        <span style="line-height: 26px;"><span style="color: #c678dd; line-height: 26px;">function</span> <span style="color: #61aeee; line-height: 26px;">toggleFullScreen</span>() </span>{
            <span style="color: #c678dd; line-height: 26px;">if</span> (!<span style="color: #e6c07b; line-height: 26px;">document</span>.fullscreenElement) {
                <span style="color: #e6c07b; line-height: 26px;">document</span>.documentElement.requestFullscreen();
            } <span style="color: #c678dd; line-height: 26px;">else</span> {
                <span style="color: #c678dd; line-height: 26px;">if</span> (<span style="color: #e6c07b; line-height: 26px;">document</span>.exitFullscreen) {
                    <span style="color: #e6c07b; line-height: 26px;">document</span>.exitFullscreen();
                }
            }
        }
    </span><span style="line-height: 26px;"></<span style="color: #e06c75; line-height: 26px;">script</span>></span>
<span style="line-height: 26px;"></<span style="color: #e06c75; line-height: 26px;">body</span>></span>
<span style="line-height: 26px;"></<span style="color: #e06c75; line-height: 26px;">html</span>></span>
generic
22.93 KB
© 气泡DM
<!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>前端Hardy</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #controls {
            position: fixed;
            top: 10px;
            left: 10px;
            z-index: 100;
            display: flex;
            align-items: center;
        }

        .btn {
            background-color: rgba(0, 0, 0, 0.4);
            border: none;
            color: rgba(255, 255, 255, 0.4);
            padding: 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 2px 2px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: rgba(255, 255, 255, 0.2);
            color: rgba(255, 255, 0, 1);
        }

        #fullscreenBtn {
            font-size: 20px;
        }

        .textwall-night {
            width: 100vw;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }

        .text-piece {
            position: absolute;
            font-size: 12px;
            line-height: 1;
            color: transparent;
            text-shadow: none;
            animation: twinkle 1.5s infinite alternate, moveOutward 10s linear infinite,
                colorChange 4s infinite;
            font-family: monospace;
            white-space: nowrap;
        }

        @keyframes twinkle {
            0% {
                opacity: 0.7;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes moveOutward {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }

            100% {
                transform: translate(var(--tx), var(--ty)) rotate(360deg);
            }
        }

        @keyframes colorChange {
            0% {
                color: #4a437f;
                text-shadow: 0 0 5px #4a437f;
            }

            20% {
                color: #6f75aa;
                text-shadow: 0 0 5px #6f75aa;
            }

            40% {
                color: #fff5bd;
                text-shadow: 0 0 5px #fff5bd;
            }

            60% {
                color: #ffd966;
                text-shadow: 0 0 5px #ffd966;
            }

            80% {
                color: #466b91;
                text-shadow: 0 0 5px #466b91;
            }

            100% {
                color: #4a437f;
                text-shadow: 0 0 5px #4a437f;
            }
        }
    </style>
</head>

<body>
    <div id="controls">
        <button id="fullscreenBtn" class="btn" title="Toggle Fullscreen">⤢</button>
    </div>
    <div class="textwall-night"></div>
    <script>
        let loremText = "";
        for (let i = 0; i < 51; i++) {
            loremText += "喜欢你";
            if (i < 49) {
                loremText += "，";
            }
        }
        console.log(loremText);
        const quantity = 150;

        const colors = [
            "#4a437f",
            "#6f75aa",
            "#fff5bd",
            "#ffd966",
            "#c7b683",
            "#466b91",
            "#2d4263"
        ];

        const textwall = document.querySelector(".textwall-night");
        let width = window.innerWidth;
        let height = window.innerHeight;

        for (let i = 0; i < quantity; i++) {
            const piece = document.createElement("div");
            piece.className = "text-piece";

            const t = i * 0.1;
            let x = width / 2 + ((Math.cos(t) * (t * 2)) % width);
            let y = height / 2 + ((Math.sin(t) * (t * 2)) % height);

            const angle = Math.random() * Math.PI * 2;
            const distance = Math.random() * 500 + 500;
            const tx = Math.cos(angle) * distance;
            const ty = Math.sin(angle) * distance;

            piece.style.setProperty("--tx", `${tx}px`);
            piece.style.setProperty("--ty", `${ty}px`);
            piece.style.left = `${x}px`;
            piece.style.top = `${y}px`;
            piece.style.animationDelay = `${Math.random() * 2.5}s`;
            piece.style.fontSize = `${Math.random() * 8 + 12}px`;

            const startPos = Math.floor(Math.random() * (loremText.length - 20));
            piece.textContent = loremText.substr(startPos, 20);

            textwall.appendChild(piece);
        }

        document.querySelectorAll(".text-piece").forEach((piece) => {
            piece.addEventListener("mouseover", () => {
                piece.style.transform = `scale(1.5)`;
                piece.style.zIndex = "1000";
                piece.style.transition = "transform 0.3s ease";
            });

            piece.addEventListener("mouseout", () => {
                piece.style.transform = "";
                piece.style.zIndex = "";
            });
        });

        const fullscreenBtn = document.getElementById("fullscreenBtn");
        fullscreenBtn.addEventListener("click", toggleFullScreen);

        function toggleFullScreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
            }
        }
    </script>
</body>

</html>
  • controls：一个容器元素，用于放置控制按钮。
  • id=”fullscreenBtn” class=”btn”：全屏切换按钮。
  • textwall-night：用于创建文字墙效果的容器。
  • #controls：设置控制按钮的位置、布局和层级。
  • .btn：设置按钮的背景颜色、边框、颜色、内边距、文本对齐、文本装饰、显示方式、字体大小、边距、光标样式和边框圆角。
  • .btn:hover：设置鼠标悬停在按钮上时的背景颜色和文字颜色。
  • #fullscreenBtn：设置全屏按钮的字体大小。
  • .textwall-night：设置文字墙的宽度、高度、位置和溢出隐藏。
  • .text-piece：设置文字片段的位置、字体大小、行高、颜色、文本阴影和动画。
  • @keyframes twinkle：定义闪烁动画的关键帧。
  • @keyframes moveOutward：定义向外移动动画的关键帧。
  • @keyframes colorChange：定义颜色变化动画的关键帧。