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);
  }
}

three.js绘制的八大行星运动效果

3D粒子波浪动画效果three.js

css3如何利用Flex实现响应式表格布局（Flex弹性布局）

css3中justify-content属性的基本用法

css3有哪些新特性（简单介绍）

标签： css3, 动画效果, 酷炫效果

上面是“css3利用视差实现做一个酷炫交互动效”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2428.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！