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

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

演示效果

HTML&CSS

html 复制代码

<!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：定义颜色变化动画的关键帧。