效果展示
在這里插入圖片描述
Demo代碼
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section><span></span></section>
</body>
</html>
CSS
html, body {
margin: 0;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #ed556a;
}
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;
display: inline-block;
position: relative;
}
span::before {
content: '';
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: -24px;
animation: loading 2s linear infinite alternate;
}
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(255, 255, 255, 0.15);
animation: loadingx 2s linear infinite alternate;
}
@keyframes loading {
0%, 32% {
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)
}
33%, 65% {
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)
}
66%, 99% {
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)
}
100% {
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)
}
}
@keyframes loadingx {
0% {
transform: translate(0, 0) rotateX(0) rotateY(0)
}
33% {
transform: translate(100%, 0) rotateX(0) rotateY(180deg)
}
66% {
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
}
100% {
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
}
}
原理詳解
步驟1
使用span標(biāo)簽芭届，設(shè)置為
- 相對定位
- 寬度拄丰、高度均為48px
- 背景色：goldenrod
span {
width: 48px;
height: 48px;
position: relative;
background-color:goldenrod;
}
效果圖如下
在這里插入圖片描述
步驟2
使用span::before偽元素，設(shè)置為
- 絕對定位（left：0 top：-24px）
- 寬度扬蕊、高度均為24px
- 背景色：白色
span::before {
content: '';
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: -24px;
background-color: white;
}
效果圖如下
在這里插入圖片描述
注：span::before是白色那個方塊
步驟3
為span::before添加動畫，利用span::before的四個陰影（box-shadow）實現(xiàn)
四個陰影的位置如下：
box-shadow:
/*陰影1*/
0 24px red,
/*陰影2*/
24px 24px orange,
/*陰影3*/
24px 48px yellow,
/*陰影4*/
0px 48px green;
效果圖如下
在這里插入圖片描述
關(guān)鍵有四幀，核心就是每個陰影的顯示與否
這里利用rgba()函數(shù)桑包，控制每個陰影的顯示，這里以假設(shè)陰影顏色為白色
- 顯示陰影 rgba(255,255,255,1)
- 不顯示陰影 rgba(255,255,255,0)
總結(jié)：顯示與否纺非，就是修改顏色的透明級別哑了。為1赘方，顯示；為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);
效果圖如下
在這里插入圖片描述
綜上颈抚，動畫為從第一幀平穩(wěn)過渡至第四幀，之后再回到第一幀
span::before {
animation: loading 2s linear infinite alternate;
}
@keyframes loading {
/*第一幀*/
0% {
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)
}
/*第二幀*/
33%{
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)
}
/*第三幀*/
66% {
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)
}
/*第四幀*/
100% {
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)
}
}
效果圖如下
在這里插入圖片描述
步驟4
在步驟3的基礎(chǔ)上胞皱，取消span::before的背景色
定義為動畫1
效果圖如下
在這里插入圖片描述
步驟5
暫且忽略步驟4產(chǎn)生的動畫1
使用span::after偽元素邪意，設(shè)置為
- 絕對定位（top：0px left：0px）
- 寬度、高度均為24px
- 背景色：白色 透明級別：0.85
span::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.85);
}
效果圖如下
在這里插入圖片描述
步驟6
為span::after添加動畫
有4個關(guān)鍵幀
第一幀（初始狀態(tài)）
- 二維空間：右移：0 下移：0
- 三維空間：繞x軸旋轉(zhuǎn)0度 繞y軸旋轉(zhuǎn)0度
transform: translate(0, 0) rotateX(0) rotateY(0)
第二幀（相對于初始狀態(tài)）
- 二維空間：右移：100% 下移：0 （100%是指相對于自身的大小反砌，若自身寬100px 那就移動100px）
- 三維空間：繞x軸旋轉(zhuǎn)0度 繞y軸旋轉(zhuǎn)180度
transform: translate(100%, 0) rotateX(0) rotateY(180deg)
<font color="red" font-wight="800">第一幀 過渡至 第二幀</font> 效果圖如下
在這里插入圖片描述
第三幀 （相對于初始狀態(tài)）
- 二維空間：右移：100% 下移：100%
- 三維空間：繞x軸旋轉(zhuǎn)-180度 繞y軸旋轉(zhuǎn)180度
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
<font color="red" font-wight="800">第二幀 過渡至 第三幀</font> 效果圖如下
在這里插入圖片描述
第四幀（相對于初始狀態(tài)）
- 二維空間：右移：0 下移：100%
- 三維空間：繞x軸旋轉(zhuǎn)-180度 繞y軸旋轉(zhuǎn)360度
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
<font color="red" font-wight="800">第三幀 過渡至 第四幀</font> 效果圖如下
在這里插入圖片描述
綜上雾鬼，動畫從第一幀過渡至第四幀，再過渡回第一幀
span::after {
animation: loadingx 2s linear infinite alternate;
}
@keyframes loadingx {
0% {
transform: translate(0, 0) rotateX(0) rotateY(0)
}
33% {
transform: translate(100%, 0) rotateX(0) rotateY(180deg)
}
66% {
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
}
100% {
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
}
}
將此動畫定義為動畫2
效果圖如下
在這里插入圖片描述
步驟7
動畫1為：
在這里插入圖片描述
動畫2為：
在這里插入圖片描述
將動畫1與動畫2疊加
效果圖如下
在這里插入圖片描述
步驟8
去掉span背景色
最終效果圖如下
在這里插入圖片描述
