效果展示
Demo代码
HTML
Document
CSS
html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #ed556a;
/* background-color: #82466e; */
animation: backColor 4s infinite;
}
section {
width: 650px;
height: 300px;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
}
span {
width: 48px;
height: 48px;
background-color: goldenrod;
display: inline-block;
position: relative;
transform: rotate(45deg);
}
span::before {
content: '';
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: -24px;
animation: loading_1 4s ease infinite;
}
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);
animation: loading_2 2s 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)
}
}
@keyframes loading_2 {
0% {
transform: translate(0, 0) rotateX(0) rotateY(0)
}
25% {
transform: translate(100%, 0) rotateX(0) rotateY(180deg)
}
50% {
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
}
75% {
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
}
100% {
transform: translate(0, 0) rotateX(0) rotateY(360deg)
}
}
原理详解
步骤1
使用span标签,设置为
- 宽度、高度均为48px
- 背景色:棕色
- 相对定位
span {
width: 48px;
height: 48px;
background-color: goldenrod;
position: relative;
}
效果图如下:
步骤2
使用span::before伪元素,设置为
- 绝对定位( left: 0 top: -24px)
- 宽度、高度均为24px
- 背景色:白色
span::before {
content: '';
width: 24px;
height: 24px;
position: absolute;
background-color: #fff;
left: 0;
top: -24px;
}
效果图如下:
步骤3
使用box-shadow为span::before设置四个阴影
span::before {
box-shadow: 0 24px red, /* 阴影1 */
24px 24px orange, /* 阴影2 */
24px 48px yellow, /* 阴影3 */
0px 48px green; /* 阴影4 */
}
四个阴影位置关系如下:
注:这里为了视觉显示区分四个阴影,每个阴影采用了不同的颜色,在实际中其实每个阴影都设置为白色。
步骤4
为span::before的四个阴影添加动画loading_1
每个阴影只有两种状态:显示 与 不显示
显示与否则是通过设置颜色的透明级别为0或1
比如
- 阴影显示:0 24px rgba(255, 255, 255, 1)
- 阴影不显示:0 24px rgba(255, 255, 255, 0)
关键有 九帧
第一帧
- 阴影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);
效果图如下:
第二帧
- 阴影1显示
- 阴影2、3、4不显示
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);
效果图如下:
第三帧
- 阴影1、2显示
- 阴影3、4不显示
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);
效果图如下:
第四帧
- 阴影1、2、3显示
- 阴影4不显示
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);
效果图如下:
第五帧
- 阴影1、2、3、4都显示
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);
效果图如下:
第六帧
- 阴影2、3、4显示
- 阴影1不显示
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);
效果图如下:
第七帧
- 阴影3、4显示
- 阴影1、2不显示
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);
效果图如下:
第八帧
- 阴影4显示
- 阴影1、2、3不显示
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);
效果图如下:
第九帧
- 阴影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);
第四帧 过渡至 第五帧 效果图如下
设置动画从第一帧过渡至第五帧
animation: loading_2 2s ease infinite;
@keyframes loading_2 {
0% {
transform: translate(0, 0) rotateX(0) rotateY(0)
}
25% {
transform: translate(100%, 0) rotateX(0) rotateY(180deg)
}
50% {
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
}
75% {
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
}
100% {
transform: translate(0, 0) rotateX(0) rotateY(360deg)
}
}
将此动画定义为动画2
效果图如下
步骤8
动画1为:
动画2为:
将动画1与动画2叠加
效果图如下
步骤9
将span旋转45度
span {
transform: rotate(45deg);
}
效果图如下:
步骤10
取消span背景色
得到最终效果