【動畫消消樂】HTML+CSS 自定義加載動畫 062
效果展示
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)
第一幀 過渡至 第二幀 效果圖如下
第三幀 （相對于初始狀態(tài)）
二維空間：右移：100% 下移：100% 三維空間：繞x軸旋轉(zhuǎn)-180度 繞y軸旋轉(zhuǎn)180度
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
第二幀 過渡至 第三幀 效果圖如下
第四幀（相對于初始狀態(tài)）
二維空間：右移：0 下移：100% 三維空間：繞x軸旋轉(zhuǎn)-180度 繞y軸旋轉(zhuǎn)360度
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
第三幀 過渡至 第四幀 效果圖如下
綜上，動畫從第一幀過渡至第四幀，再過渡回第一幀
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背景色
最終效果圖如下
結(jié)語
希望對您有所幫助
如有錯誤歡迎小伙伴指正～
我是 海轟?(?ˊ?ˋ)?
如果您覺得寫得可以的話
請點個贊吧
謝謝支持??
評論
圖片
表情