正方体翻滚Loading 2.0

说在前面

前面实现了一个正方体翻滚Loading 1.0 版本

看久了觉得原地翻滚有点没意思了，不如让它左右滚动起来

效果展示

codepen

在线体验 ：codepen.io/yongtaozhen...

码上掘金

在线体验 ：code.juejin.cn/pen/7639379...

关键改动代码

1.容器变宽，给横向运动留空间

2.0 要让方块左右跑，容器宽度肯定得比 1.0 大。

css 复制代码

.loader {
  position: relative;
  width: 300px;
  height: 218px;
  perspective: 880px;
  isolation: isolate;
}

.cube {
  position: absolute;
  left: 50%;
  bottom: 64px;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  transform-style: preserve-3d;
  transform: translateX(-100px) translateY(0px) rotateX(-8deg)
    rotateY(8deg) rotateZ(0deg);
}

这里的关键是 translateX(-100px) 作为起点，让方块从左侧出发。

2.一个关键帧写完整"去程 + 回程"

0%~50% 作为去程，50%~100% 作为回程。

css 复制代码

@keyframes roll-commute {
  0% {
    transform: translateX(-100px) translateY(0px) rotateX(-8deg)
      rotateY(8deg) rotateZ(0deg);
  }
  25% {
    transform: translateX(0px) translateY(0px) rotateX(-8deg)
      rotateY(8deg) rotateZ(180deg);
  }
  50% {
    transform: translateX(100px) translateY(0px) rotateX(-8deg)
      rotateY(8deg) rotateZ(360deg);
  }
  75% {
    transform: translateX(0px) translateY(0px) rotateX(-8deg)
      rotateY(8deg) rotateZ(180deg);
  }
  100% {
    transform: translateX(-100px) translateY(0px) rotateX(-8deg)
      rotateY(8deg) rotateZ(0deg);
  }
}

用 6.25% 一档的细分节点（每次抬起是 translateY(-14px)），这样滚动不是"滑行"，而是明显的"翻面跳跃感"。

3.阴影跟着走

css 复制代码

@keyframes shadow-sync {
  0% { transform: translateX(-100px) scaleX(0.9); opacity: 0.5; }
  25% { transform: translateX(0px) scaleX(0.9); opacity: 0.5; }
  50% { transform: translateX(100px) scaleX(0.9); opacity: 0.5; }
  75% { transform: translateX(0px) scaleX(0.9); opacity: 0.5; }
  100% { transform: translateX(-100px) scaleX(0.9); opacity: 0.5; }
}

然后再叠一层 contact-shadow（接触阴影），在抬起节点压低透明度，就会有"离地-落地"的重量反馈。

源码地址

gitee

源码地址 ：gitee.com/zheng_yongt...

github

源码地址 ：github.com/yongtaozhen...

🌟 觉得有帮助的可以点个 star~

🖊 有什么问题或错误可以指出，欢迎 pr~

📬 有什么想要实现的功能或想法可以联系我~

公众号

关注公众号『 前端也能这么有趣 』，获取更多有趣内容。发送加群还可以加入群聊，一起来学习（摸鱼）吧~

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。