正方体翻滚，Loading 2.0到底来没来？

哎呀，你说这事儿啊，真是让我想起小时候玩那种方块滚动的小游戏。

那时候手指头划一划，方块就像喝了红牛一样蹦跶。

哈哈，现在我们说的可是Loading 2.0，不止是转圈圈那么简单。

咱就是说这玩意儿要把用户体验给翻个底朝天。

先别急，我慢慢跟你讲。

Zui原始的正方体翻滚，就是把一个立方体放在屏幕上，让它沿着X轴和Y轴不停翻面。

kan着它每一次翻转，dou像在提醒你：别慌，内容马上来了。

害，这种视觉反馈其实隐藏了hen多技术细节。

@keyframes roll { 0% { transform: rotateX rotateY; } 25% { transform: rotateX rotateY; } 50% { transform: rotateX rotateY; } 75% { transform: rotateX rotateY; } 100% { transform: rotateX rotateY; } }

这段代码不长，却Neng让方块在三维空间里自嗨一遍又一遍。

说实话，要把它套进Loading动画里还得配合CSS变量和transform-origin，才Neng实现“原地翻滚”和“横向滑行”两种模式。

先说交互吧。

老版本的Loading大多数dou是圆形旋转，用户kan到后脑子里只会浮现“等”。

Loading 2.0则把方块当成“小角色”，让它在页面边缘来回跑，甚至还Neng“跳”。

这样用户心里会暗暗想：“哎呀，这个网站挺有意思，我再等等吧”。

再聊反馈。

我们在动画关键帧里加入了阴影同步

@keyframes shadow-sync {
    0%   { opacity: .6; transform: translateX scaleX; }
    50%  { opacity: .9; transform: translateX scaleX; }
    100%{ opacity: .6; transform: translateX scaleX; }
}

阴影随方块移动，让人感觉它真的在地面上滚动，有一种“重量感”。

这点对SEO也有好处——搜索引擎越来越注重LCP和Cumulative Layout Shift, 动画Ru果写得合理，不会导致布局抖动，分数自然上去了。

#1 用语义化HTML：

.loader {
    position: relative;
    width: 120px;
    height: 120px;
    perspective: 800px;
}
.cube {
    width: 60px;
    height: 60px;
    margin:auto;
    transform-style: preserve-3d;
    animation: roll 2s infinite linear,
               shadow-sync .8s infinite ease-in-out;
}
.face {
    position:absolute;
    width:60px;height:60px;background:#ff6600;
    opacity:.9;
}
.face.front { transform: translateZ;}
.face.right { transform: rotateY translateZ;}
.face.top   { transform: rotateX translateZ;}