纯css+div实现立体层叠式图文幻灯片弹出层卡片点击关闭切换效果代码-html代码-BFW代码库

纯css+div实现立体层叠式图文幻灯片弹出层卡片点击关闭切换效果代码

代码语言：html

所属分类：幻灯片

代码描述：纯css+div实现立体层叠式图文幻灯片弹出层卡片点击关闭切换效果代码，切换卡片有动画。

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
          <link rel="preconnect" href="https://fonts.bunny.net">
  <link href="https://fonts.bunny.net/css?family=kodchasan:200,400,600" rel="stylesheet" />
        <style>
/* 定义 CSS 层的顺序 */
@layer base, utilities, demo;

/*
  注意：字体的 @import 已被移除。
  请将下面这行代码添加到您 HTML 文件的 <head> 部分来引入字体：

*/

@layer demo {
    section {
        --_offset-steps: 6rem;
        --_scale-steps: 25;
        --_opacity-steps: 15;
        --_ani-duration: 300ms;
        --_ani-delay: 200ms;
        --_offset-steps-two: calc(var(--_offset-steps) * -1);
        --_offset-steps-three: calc(var(--_offset-steps) * -2);
        --scale-steps-two: calc(1 - var(--_scale-steps) * 0.01);
        --scale-steps-three: calc(1 - var(--_scale-steps) * 0.02);
        --opacity-steps-two: calc(1 - var(--_opacity-steps) * 0.02);
        --opacity-steps-three: calc(1 - var(--_opacity-steps) * 0.04);

        display: grid;
        grid-template-areas: "stack";
        color: black;
        width: min(calc(100% - 2rem), 40rem);
    }

    @media (width > 600px) {
        section {
            --_offset-steps: 4em;
        }
    }

    article {
        --_bg-alpha: 0.5;
        --_border-radius: 10px;
        --_bg-dot-offset: 20px;
        --_bg-dot-color: var(--_bg-clr);
        position: relative;
        isolation: isolate;
        background-color: white;
        grid-area: stack;
        transition: 500ms ease-in-out;
        border-radius: var(--_border-radius);
        translate: 0 var(--_offset);
        order: var(--_order);
        z-index: var(--_order);
        scale: var(--_scale);
        opacity: var(--_opacity);
        font-family: "Kodchasan", sans-serif;
    }

    article::before,
    article::after {
        content: "";
        position: absolute;
        border-radius: inherit;
        z-index: -1;
    }

    article::before {
        z-index: -1;
        inset: calc(var(--_bg-dot-offset) * -1);
        background-image: radial-gradient(var(--_bg-dot-color) 1px, transparent 0);
        background-repeat: repeat;
        background-size: 5px 5px;
        background-position: center;
        border-radius: calc(var(--_border-radius) + var(--_bg-dot-offset));
    }

    article::after {
        background-color: white;
        inset: 0;
    }

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