css3利用视差实现做一个酷炫交互动效

html代码：

<div class="g-scroll" id="g-scroll"></div>
<div class="g-wrapper">
  <div class="g-mask"></div>
  <div class="g-inner">
    <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    <div class="g-item">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
  </div>
</div>

css3代码：

@property --phase {
  syntax: '';
  inherits: false;
  initial-value: 15px;
}

html, body {
  width: 100%;
  height: 100%;
  display: flex;
}

.g-scroll {
  width: 100%;
  height: 1000vh;
  position: relative;
}
.g-wrapper {
  position: fixed;
  top: -20%;
  width: 100vw;
  height: 100vh;
  perspective: 200px;
  transform-style: preserve-3d;
}

.g-mask {
  position: fixed;
  width: 100vw;
  height: 120vh;
  backdrop-filter: blur(5px);
  transform: translateZ(0);
}

.g-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  transform-style: preserve-3d;
  transform: translateY(calc(-50% + 100px)) translateZ(var(--phase)) rotateX(90deg);
  transform-origin: bottom center;
  animation-name: move;
  animation-duration: 1s;
  animation-timeline: box-move;
}

@scroll-timeline box-move {
  source: selector("#g-scroll");
  orientation: "vertical";
}

.g-item {
  width: 300px;
  height: 200px;
  padding: 8px;
  box-sizing: border-box;
  color: #fff;
  background: #000;
  transform: rotateX(-90deg);
}

@keyframes move {
  0% {
    --phase: 0;
  }
  100% {
    --phase: calc(100vh + 100px);
  }
}

本文链接：http://so.lmcjl.com/news/18442/