如何用纯HTML、CSS和JavaScript实现类似Acertinity UI首页的网格线条动画效果？

嘿，我来帮你搞定这个网格线条动画！从你描述的效果来看，应该是背景上有缓慢流动的横向和纵向细线条，交错成网格状的动态效果对吧？我把实现步骤拆解开，你跟着一步步来就能搞定～

第一步：完善HTML结构 #

咱们先把基础结构搭好，除了你已有的grid-container，再加一个专门放网格线条的容器，避免和页面内容冲突：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Line Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 网格线条容器 -->
    <div class="grid-animation"></div>
    <!-- 你的页面内容容器 -->
    <div class="grid-container">
        <!-- 这里放你的页面内容 -->
        <h1>我的页面内容</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

第二步：编写CSS样式 #

这部分是控制线条外观和动画核心，我们要把网格容器设为全屏背景，线条用绝对定位，再用@keyframes实现流动动画：

/* 全局重置，避免默认边距干扰 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden; /* 隐藏超出视口的线条 */
    position: relative;
}

/* 网格动画容器：全屏覆盖 */
.grid-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* 让鼠标可以穿透网格，点击下面的内容 */
    z-index: 0;
    background-color: #0a0a0a; /* 深色背景，让线条更明显 */
}

/* 通用线条样式 */
.grid-line {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.1); /* 半透明白色线条 */
}

/* 横向线条：水平延伸，垂直移动 */
.grid-line.horizontal {
    width: 100%;
    height: 1px;
    animation: moveLineHorizontal linear infinite;
}

/* 纵向线条：垂直延伸，水平移动 */
.grid-line.vertical {
    height: 100%;
    width: 1px;
    animation: moveLineVertical linear infinite;
}

/* 横向线条的动画：从顶部移到底部 */
@keyframes moveLineHorizontal {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100vh);
    }
}

/* 纵向线条的动画：从左侧移到右侧 */
@keyframes moveLineVertical {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100vw);
    }
}

第三步：用JavaScript动态生成线条 #

手动写一堆线条太麻烦，用JS批量生成还能随机控制动画参数，让效果更自然：

const gridContainer = document.querySelector('.grid-animation');
const horizontalCount = 10; // 横向线条数量
const verticalCount = 10; // 纵向线条数量

// 生成横向线条
for (let i = 0; i < horizontalCount; i++) {
    const line = document.createElement('div');
    line.classList.add('grid-line', 'horizontal');
    // 随机设置初始位置和动画参数
    line.style.top = `${Math.random() * 100}%`;
    const duration = 15 + Math.random() * 10; // 动画时长：15-25秒
    const delay = Math.random() * 10; // 延迟：0-10秒
    line.style.animation = `moveLineHorizontal ${duration}s linear ${delay}s infinite`;
    gridContainer.appendChild(line);
}

// 生成纵向线条
for (let i = 0; i < verticalCount; i++) {
    const line = document.createElement('div');
    line.classList.add('grid-line', 'vertical');
    // 随机设置初始位置和动画参数
    line.style.left = `${Math.random() * 100}%`;
    const duration = 15 + Math.random() * 10; // 动画时长：15-25秒
    const delay = Math.random() * 10; // 延迟：0-10秒
    line.style.animation = `moveLineVertical ${duration}s linear ${delay}s infinite`;
    gridContainer.appendChild(line);
}

关键细节调整提示 #

• 如果你想改变风格，可以修改线条的background-color（比如换成蓝色系）、height/width调整粗细
• 调整horizontalCount和verticalCount可以控制线条的密度
• 动画时长duration和延迟delay的数值可以按需修改，让线条流动速度更快或更慢

备注：内容来源于stack exchange，提问作者Shahid Amin