css+div实现视频视觉差异滚动效果代码-html代码-BFW代码库

css+div实现视频视觉差异滚动效果代码

代码语言：html

代码描述：css+div实现视频视觉差异滚动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频视差滚动效果</title>
    <style>
        /* --- 基础样式 --- */
        body, html {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.8;
            color: #333;
            scroll-behavior: smooth; /* 让锚点链接平滑滚动 */
        }

        /* --- 视频背景容器 --- */
        #video-background {
            /* 关键：固定在视口中 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* 关键：将其置于所有内容的后面 */
            overflow: hidden; /* 防止视频溢出 */
        }

        /* --- 背景视频本身 --- */
        #bg-video {
            /* 确保视频完全覆盖容器，不变形 */
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%); /* 居中视频 */
        }
        
        /* --- 遮罩层 (可选，但推荐) --- */
.........完整代码请登录后点击上方下载按钮下载查看