open-props实现页面滚动卡片淡入效果代码-html代码-BFW代码库

open-props实现页面滚动卡片淡入效果代码

代码语言：html

代码描述：open-props实现页面滚动卡片淡入效果代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@import "//repo.bfw.wiki/bfwrepo/css/open-props.css" layer(design.system);
@import "//repo.bfw.wiki/bfwrepo/css/open-props.normalize.light.min.css" layer(demo.support);

@keyframes slide-fade-in {
  from {
    opacity: 0;
    box-shadow: none;
    transform: scale(.8) translateY(15vh);
  }
}

@layer demo {
  .card {
    @media (prefers-reduced-motion: no-preference) {
      view-timeline-name: --item-timeline;
      animation: slide-fade-in both;
      animation-timeline: --item-timeline;
      animation-range: contain 0% contain 50%;
    }
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    background: var(--surface-3);
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    padding-block: 30dvh;
  }
  
  .cards {
    display: grid;
    gap: var(--size-3);
    grid-auto-flow: dense;
    grid-template-columns: repeat(3, var(--size-content-1));
    
    & > .card {
      background: linear-gradient(#fff, #fff), var(--gradient-10);
      background-origin: border-box;
      background-clip: content-box, border-box;
      border-radius: var(--radius-3);
      box-shadow: var(--shadow-3);
      line-height: 3;
      padding-top: var(--size-1);
      font-size: var(--font-size-4);
      font-weight: var(--font-weight-6);
      font-family: var(--font-mono);
      display: grid;
      place-content: center;
      
      &:nth-of-type(4n) {
        grid-row: span 2;
        background-image: linear-gradient(#fff, #fff), var(--gradient-3);
      }
      
      &:nth-of-type(7n) {
        grid-row: span 3;
        background-image: linear-gradient(#fff, #fff), var(--gradient-5);
      }
      
      &:nth-of-type(5n) {
        grid-column: span 2;
        background-image: linear-gradient(#fff, #fff), var(--gradient-18);
      }
    }
  }
}
</style>

  
  
</head>

<body translate="no">
  <div class="cards">
  <div class="card">&lt;html&gt;</div>
  <div class="card">&lt;base&gt;</div>
  <div class="card">&lt;head&gt;</div>
  <div class="card">&lt;link&gt;</div>
  <div class="card">&lt;meta&gt;</div>
  <div class="card">&lt;script&gt;</div>
  <div class="card">&lt;style&gt;</div>
  <div class="card">&lt;title&gt;</div>
  <div class="card">&lt;body&gt;</div>
  <div class="card">&lt;address&gt;</div>
  <div class="card">&lt;article&gt;</div>
  <div class="card">&lt;aside&gt;</div>
  <div class="card">&lt;footer&gt;</div>
  <div class="card">&lt;header&gt;</div>
  <div class="card">&lt;h1&gt;</div>
  <div class="card">&lt;h2&gt;</div>
  <div class="card">&lt;h3&gt;</div>
  <div class="card">&lt;h4&gt;</div>
  <div class="card">&lt;h5&gt;</div>
  <div class="card">&lt;h6&gt;</div>
  <div class="card">&lt;hgroup&gt;</div>
  <div class="card">&lt;main&gt;</div>
  <div class="card">&lt;nav&gt;</div>
  <div class="card">&lt;section&gt;</div>
  <div class="card">&lt;blockquote&gt;</div>
  <div class="card">&lt;cite&gt;</div>
  <div class="card">&lt;dd&gt;</div>
  <div class="card">&lt;dt&gt;</div>
  <div class="card">&lt;dl&gt;</div>
  <div class="card">&lt;div&gt;</div>
  <div class="card">&lt;figcaption&gt;</div>
  <div class="card">&lt;figure&gt;</div>
  <div class="card">&lt;hr&gt;</div>
  <div class="card">&lt;li&gt;</div>
  <div class="card">&lt;ol&gt;</div>
  <div class="card">&lt;ul&gt;</div>
  <div class="card">&lt;menu&gt;</div>
  <div class="card">&lt;p&gt;</div>
  <div class="card">&lt;pre&gt;</div>
  <div class="card">&lt;a&gt;</div>
  <div class="card">&lt;abbr&gt;</div>
  <div class="card">&lt;b&gt;</div>
  <div class="card">&lt;bdi&gt;</div>
  <div class="card">&lt;bdo&gt;</div>
  <div class="card">&lt;br&gt;</div>
  <div class="card">&lt;code&gt;</div>
  <div class="card">&lt;data&gt;</div>
  <div class="card">&lt;dfn&gt;</div>
  <div class="card">&lt;em&gt;</div>
  <div class="card">&lt;i&gt;</div>
  <div class="card">&lt;kbd&gt;</div>
  <div class="card">&lt;mark&gt;</div>
  <div class="card">&lt;q&gt;</div>
  <div.........完整代码请登录后点击上方下载按钮下载查看