【动画消消乐】HTML+CSS 自定义加载动画：清新折叠方块效果 063（附源码及原理详解） (3)

第九帧

阴影1、2、3、4均不显示

box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0);

效果图如下：

设置动画animation使得从第一帧平稳过渡至第九帧

animation: loading_1 4s ease infinite; @keyframes loading_1 { 0% { box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0) } 12% { box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0) } 25% { box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0) } 37% { box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 0) } 50% { box-shadow: 0 24px rgba(255, 255, 255, 1), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 1) } 62% { box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 1), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 1) } 75% { box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 1), 0px 48px rgba(255, 255, 255, 1) } 87% { box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 1) } 100% { box-shadow: 0 24px rgba(255, 255, 255, 0), 24px 24px rgba(255, 255, 255, 0), 24px 48px rgba(255, 255, 255, 0), 0px 48px rgba(255, 255, 255, 0) } }

效果图如下：

步骤5

取消span::before的背景色

将此时形成的动画定义为动画1

步骤6

先忽略span::before形成的动画，暂时注释掉

使用span::after伪元素，设置为

绝对定位（top：0 left：0）

宽带、高度均为24px

背景色：白色，透明级别：0.85

阴影：0 0 10px rgba(0, 0, 0, 0.15);

span::after { content: ''; position: absolute; left: 0; top: 0; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }

效果图如下：

步骤7

为span::after添加动画

有5个关键帧

第一帧（初始状态）

二维空间：右移：0 下移：0

三维空间：绕x轴旋转0度 绕y轴旋转0度

transform: translate(0, 0) rotateX(0) rotateY(0)

第二帧（相对于初始状态）

二维空间：右移：100% 下移：0 （100%是指相对于自身的大小，若自身宽100px 那就移动100px）

三维空间：绕x轴旋转0度 绕y轴旋转180度

transform: translate(100%, 0) rotateX(0) rotateY(180deg)

第一帧 过渡至 第二帧 效果图如下

第三帧 （相对于初始状态）

二维空间：右移：100% 下移：100%

三维空间：绕x轴旋转-180度 绕y轴旋转180度

transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)

第二帧 过渡至 第三帧 效果图如下

第四帧（相对于初始状态）

二维空间：右移：0 下移：100%

三维空间：绕x轴旋转-180度 绕y轴旋转360度

transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)

第三帧 过渡至 第四帧 效果图如下

第五帧（相对于初始状态）

二维空间：右移：0 下移：0

三维空间：绕x轴旋转0度 绕y轴旋转360度

transform: translate(0, 0) rotateX(0) rotateY(360deg)；

第四帧 过渡至 第五帧 效果图如下