效果展示
大家好，这里是初心Yearth，欢迎来到 10 mins css，每天花 10 分钟，实现一个简单精美的 css 效果。
那么下面我们直接进入正题，先来看看今天的效果展示吧：
分析
相信经过之前几次的分析，大家已经轻车熟路了，那么就不废话，直接着手分析这个需要实现这个效果的关键点：
- 需要给方块实现荧光效果，这点我们可以使用
box-shadow - 仔细观察的读者可以看到，方块翻转之后有一个“没站稳”的感觉，对于这点，我们可以利用 animation 和 rotate 进行调整来实现
- 地面有着镜面的效果，这个可以借助于 -webkit-box-reflect 来实现
大致关键点就是上面这几点，而其他的细节我们可以在实现中讨论。
Coding
现在已经知道了思路，那么便开始愉快的 coding 吧，首先是实现一个荧光的方块。
荧光方块
其实原理很简单，我们知道，box-shadow 是可以无限叠加的，那么我们就在方块的周围重复叠加不断变淡的阴影即可：
:root {
--bg-color: #000000;
--cube-color: #03e9f4;
}
body {
width: 100%;
height: 100vh;
background: var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
}
.cube {
height: 200px;
width: 200px;
background: var(--cube-color);
box-shadow: 0 0 5px rgba(3, 233, 244, 1),
0 0 25px rgba(3, 233, 244, 1),
0 0 50px rgba(3, 233, 244, 1),
0 0 100px rgba(3, 233, 244, 1),
0 0 200px rgba(3, 233, 244, 0.5),
0 0 300px rgba(3, 233, 244, 0.5);
}
效果如下：
翻滚方块
让方块翻滚起来有两个关键点：
- 让方块转动起来
- 将动画的支点移动到方块的右下角
这个很简单，直接实现即可：
.cube {
/* ... */
+ animation: cubeClimb 1.5s ease-in-out infinite;
+ transform-origin: bottom right;
}
@keyframes cubeClimb {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(90deg);
}
}
效果如下：
实现了翻滚，那么接下来就该考虑这个方块翻滚之后有点“站不稳”的细节了。
我们知道，按照常理，回弹的角度应该是越来越小的，所以这里可以用诸如 85, 87.5 这样的数据来模拟这个效果：
@keyframes cubeClimb {
0% {
transform: rotate(0deg);
}
60% {
transform: rotate(90deg);
}
65% {
transform: rotate(85deg);
}
70% {
transform: rotate(90deg);
}
75% {
transform: rotate(87.5deg);
}
80%,
100% {
transform: rotate(90deg);
}
}
效果如下：
到这里，有的读者可能会认为：方块虽然已经能够翻滚的，但每一圈之后都会重置到原来的位置上，没法连续起来呀。
别急，单纯对方块来说，能做的就这么多了，想要让动画连续起来，我们可以像胶圈一样，让背景跟着移动起来就好：
.box {
display: flex;
justify-content: center;
width: 100%;
animation: moveFloor 1.5s ease-in-out infinite;
}
@keyframes moveFloor {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-200px);
}
}
效果如下：
地板
其实这个效果只需要一行代码就可以实现了：
.box {
/* ... */
+ -webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
}
效果如下：
说在后面的
到这里，其实整个效果已经实现得七七八八了，现在还留下一个问题：怎么让方块斜着网上爬？
这个问题本文暂不作答，感兴趣的读者可以自行尝试一下，也算是消化理解一番。
那么今天就到此为止，感谢阅读，以及若有谬误之处，望不吝指出。
最后，这里是在线 demo：荧光方块攀爬效果
