js+css实现书架卡片打开幻灯片代码-html代码-BFW代码库

js+css实现书架卡片打开幻灯片代码

代码语言：html

所属分类：幻灯片

代码描述：js+css实现书架卡片打开幻灯片代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


    <style>
         :root {
        --bg: #0a0b0d;
        --surface-2: #1c1f24;
        --text: #f2f3f5;
        --muted: #8b9099;
        --shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        --ease: cubic-bezier(.16, 1, .3, 1);
    }

    * { box-sizing: border-box; }

    html, body {
        margin: 0;
        padding: 0;
        background: var(--bg);
        color: var(--text);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body.lock-scroll {
        overflow: hidden;
    }

    .demo-header {
        padding: 28px 20px 6px;
        max-width: 720px;
    }

    .demo-header h1 {
        font-size: 20px;
        margin: 0 0 6px;
    }

    .demo-header p {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.5;
        margin: 0 0 4px;
    }

    .demo-header code {
        background: var(--surface-2);
        padding: 1px 6px;
        border-radius: 4px;
        font-size: 12px;
    }

    /* ---------- horizontal shelf ---------- */

    .stage {
        position: relative;
        overflow-x: auto;
        overflow-y: visible;
        width: 100%;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: auto; /* critical: never "smooth" — we drive motion ourselves */
        touch-action: pan-x;   /* this element only claims horizontal gestures */
        cursor: grab;
        padding: 18px 0;
    }

    .stage.is-dragging {
        cursor: grabbing;
    }

    .stage::-webkit-scrollbar {
        display: none;
    }

    .h-track {
        display: flex;
        gap: 10px;
        padding: 0px 10px;
        user-select: none; /* avoid text/image selection while mouse-dragging */
    }

    .card {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        cursor: pointer;
        flex-shrink: 0;
        transform: translateZ(0);
    }

    .h-card {
        width: 110px;
        height: 170px;
        transition: transform 260ms var(--ease), filter 260ms var(--ease);
        will-change: transform;
    }

    /* whichever card currently "has the video" gets a gentle lift so the
       hand-off from one card to the next reads as intentional */
    .h-card.is-centered {
        transform: scale(1.07);
        filter: brightness(1.12);
        z-index: 2;
    }

    .poster {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        transition: opacity 0.3s;
        -webkit-user-drag: none;
    }

    .poster::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 55%);
    }

    .card.is-playing .poster {
        opacity: 0;
    }

    .video-slot {
        position: absolute;
        inset: 0;
        z-index: 1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .video-slot video {
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: cover;
        display: block;
        pointer-events: none;
    }

    .card.is-playing .video-slot {
        opacity: 1;
    }

    .meta {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        padding: 9px 10px 10px;
    }

    .h-card .meta .genre { display: none; }
    .h-card .meta .title { display: none; }

    /* ---------- fullscreen reel ---------- */
    .reel {
        position: fixed;
        inset: 0;
        z-index: 100;
        background: #000;
        display: flex;
    }

    .reel[hidden] { display: none; }

    .reel-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
    }

    .v-track {
        .........完整代码请登录后点击上方下载按钮下载查看