【動(dòng)畫消消樂】HTML+CSS 自定義加載動(dòng)畫 068
Part1效果展示
Part2Demo代碼
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;
/* 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: 8px;
height: 48px;
display: inline-block;
position: relative;
border-radius: 4px;
left: -40px;
color: white;
/* background-color: black; */
box-shadow: 20px -10px, 40px 10px, 60px 0px;
animation: loading 1s linear infinite;
}
@keyframes loading {
0% {
box-shadow: 20px -10px, 40px 10px, 60px 0px
}
25% {
box-shadow: 20px 0px, 40px 0px, 60px 10px
}
50% {
box-shadow: 20px 10px, 40px -10px, 60px 0px
}
75% {
box-shadow: 20px 0px, 40px 0px, 60px -10px
}
100% {
box-shadow: 20px -10px, 40px 10px, 60px 0px
}
}
Part3原理詳解
步驟1
使用span標(biāo)簽，設(shè)置為
相對(duì)定位 寬度為8px 高度為48px 背景色：黑色 color：白色（使得span的陰影是白色） border-radius: 4px
span {
width: 8px;
height: 48px;
position: relative;
border-radius: 4px;
color: white;
background-color: black;
}
效果圖如下
步驟2
將span左移40px
span {
left: -40px;
}
效果圖如下
步驟3
使用span的三個(gè)陰影，位置關(guān)系為
box-shadow: 20px 0px, /*陰影1*/
40px 0px, /*陰影2*/
60px 0px;/*陰影3*/
三個(gè)陰影位置關(guān)系如下
注：陰影2是位于頁面正中間的
步驟4
為span的三個(gè)陰影添加動(dòng)畫
每個(gè)陰影動(dòng)畫效果其實(shí)都是一樣的 只是開始狀態(tài)不同
先以一個(gè)陰影的動(dòng)畫效果為例
box-shadow: 20px 0px是指陰影1在x軸方向移動(dòng)20px，y軸方向移動(dòng)0px
如果是 box-shadow: 20px -10px 則是指在x軸方向移動(dòng)20px，y軸移動(dòng)-10px（簡單的說就是向左移動(dòng)20px 再向上移動(dòng)10px）
陰影1在x軸上的位置始終設(shè)置為在20px處
在y軸上發(fā)生變化
變化過程為：-10 -> 0 -> 10 ->0 -> -10
陰影1動(dòng)畫實(shí)現(xiàn)代碼：
@keyframes loadingx{
0%{
box-shadow: 20px -10px;
}
25%{
box-shadow: 20px 0px;
}
50%{
box-shadow: 20px 10px;
}
75%{
box-shadow: 20px 0px;
}
100%{
box-shadow: 20px -10px;
}
}
效果圖如下
同理，陰影2、3變化過程也如陰影1一般
只是y軸變化的起始位置稍微有點(diǎn)變化
陰影2 變化過程為：10 -> 0 -> -10 ->0 -> 10
陰影3 變化過程為：0 -> 10 -> 0 ->-10 -> -0
動(dòng)畫實(shí)現(xiàn)代碼：
span {
animation: loading 1s linear infinite;
}
@keyframes loading {
0% {
box-shadow: 20px -10px, 40px 10px, 60px 0px
}
25% {
box-shadow: 20px 0px, 40px 0px, 60px 10px
}
50% {
box-shadow: 20px 10px, 40px -10px, 60px 0px
}
75% {
box-shadow: 20px 0px, 40px 0px, 60px -10px
}
100% {
box-shadow: 20px -10px, 40px 10px, 60px 0px
}
}
產(chǎn)生的效果如下：
步驟5
注釋掉span背景色
span {
/* background-color: black; */
}
得到最終的效果圖
Part4結(jié)語
希望對(duì)您有所幫助
如有錯(cuò)誤歡迎小伙伴指正～
我是 海轟?(?ˊ?ˋ)?
如果您覺得寫得可以的話
請(qǐng)點(diǎn)個(gè)贊吧
謝謝支持??
評(píng)論
圖片
表情