【動(dòng)畫(huà)消消樂(lè)】HTML+CSS 自定義加載動(dòng)畫(huà) 067
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;
animation: loading 1s linear infinite alternate;
}
@keyframes loading {
0% {
box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 1);
}
50% {
box-shadow: 20px 0 rgba(255, 255, 255, 1), 40px 0 rgba(255, 255, 255, 0.25), 60px 0 rgba(255, 255, 255, 1);
}
100% {
box-shadow: 20px 0 rgba(255, 255, 255, 1), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 0.25);
}
}
Part3原理詳解
步驟1
使用span標(biāo)簽，設(shè)置為
相對(duì)定位 寬度為8px 高度為48px 背景色：黑色 border-radius: 4px
span {
width: 8px;
height: 48px;
position: relative;
background-color: black;
border-radius: 4px;
}
效果圖如下
步驟2
將span左移動(dòng)40px
span {
left: -40px;
}
效果圖如下
步驟3
設(shè)置span的三個(gè)陰影
顏色均為白色，位置關(guān)系為
box-shadow: 20px 0 rgba(255, 255, 255, 1), /*陰影1*/
40px 0 rgba(255, 255, 255, 1), /*陰影2*/
60px 0 rgba(255, 255, 255, 1);/*陰影3*/
陰影位置如下
步驟4
為span的三個(gè)陰影設(shè)置動(dòng)畫(huà)
通過(guò)使用rgba()函數(shù)設(shè)置每個(gè)陰影的顏色深淺情況
rgba(255, 255, 255, 1)表示純白 rgba(255, 255, 255, 0.25)表示淺白
動(dòng)畫(huà)關(guān)鍵有 三幀
第一幀
陰影1為淺白色 陰影2、3為純白色
box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 1);
效果圖如下
第二幀
陰影2為淺白色 陰影1、2為純白色
效果圖如下
第三幀
陰影3為淺白色 陰影1、2為純白色
效果圖如下
使用animation設(shè)置動(dòng)畫(huà)從第一幀均為過(guò)渡至第三幀再過(guò)渡至第一幀
animation: loading 1s linear infinite alternate;
@keyframes loading {
0% {
box-shadow: 20px 0 rgba(255, 255, 255, 0.25), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 1);
}
50% {
box-shadow: 20px 0 rgba(255, 255, 255, 1), 40px 0 rgba(255, 255, 255, 0.25), 60px 0 rgba(255, 255, 255, 1);
}
100% {
box-shadow: 20px 0 rgba(255, 255, 255, 1), 40px 0 rgba(255, 255, 255, 1), 60px 0 rgba(255, 255, 255, 0.25);
}
}
效果圖如下
步驟5
注釋掉span背景色
最終效果圖如下
Part4結(jié)語(yǔ)
希望對(duì)您有所幫助
如有錯(cuò)誤歡迎小伙伴指正～
我是 海轟?(?ˊ?ˋ)?
如果您覺(jué)得寫(xiě)得可以的話
請(qǐng)點(diǎn)個(gè)贊吧
謝謝支持??
評(píng)論
圖片
表情