纯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;
        isol.........完整代码请登录后点击上方下载按钮下载查看