「HTML+CSS」--自定義加載動畫【047】

效果展示

在這里插入圖片描述

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: #263238;
}

section {
  width: 650px;
  height: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid red;
}

span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  color: white;
  left: -100px;
  /* background-color: red; */
  animation: loading 4s linear infinite;
}

@keyframes loading {
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  12% {
    box-shadow: 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  25% {
    box-shadow: 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  36% {
    box-shadow: 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);
  }
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1);
  }
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1);
  }
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1);
  }
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}

原理詳解

步驟1

使用span標簽九榔，設(shè)置為

寬度筋现、高度均為20px
圓角化
背景色為紅色

  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  background-color: red;

效果圖如下

在這里插入圖片描述

步驟2

將小球左移100px

left: -100px;

效果圖如下

在這里插入圖片描述

步驟3

為span添加動畫

使用box-shadow陰影充當白色小球

白色小球有四個

關(guān)鍵有9幀

第一幀

四個白色小球（也就是span的陰影）均位于span初始位置命贴，即紅色小球所處的位置
顏色均為rgba(255, 255, 255, 0)（白色钠绍，但是透明級別為0，視覺上看不見）

box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);

效果圖如下

在這里插入圖片描述

第二幀

小球1移動至紅色小球右側(cè)100px處亏掀，顏色變?yōu)?code>rgba(255, 255, 255, 1)（純白）

其余小球位置不變

box-shadow: 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);

效果圖如下

在這里插入圖片描述

第三幀

小球1再向右移動20px（即一個小球的直徑長度）
小球2從初識位置移動至紅色小球右側(cè)100px處（即第二幀小球1所處的位置）
小球1缸榄、2顏色均為rgba(255, 255, 255, 1)（純白）
其余小球不變

 box-shadow: 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);

效果圖如下

在這里插入圖片描述

第四幀

小球1再向右移動20px（即一個小球的直徑長度）
小球2再向右移動20px
小球3從初識位置移動至紅色小球右側(cè)100px處（即第三幀小球2所處的位置）
小球1渤弛、2祝拯、3顏色均為rgba(255, 255, 255, 1)（純白）

 box-shadow: 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0);

效果圖如下

在這里插入圖片描述

第五幀

小球1再向右移動20px（即一個小球的直徑長度）
小球2再向右移動20px
小球3再向右移動20px
小球4從初識位置移動至紅色小球右側(cè)100px處（即第四幀小球3所處的位置）
小球1甚带、2、3佳头、4顏色均為rgba(255, 255, 255, 1)（純白）

box-shadow: 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);

效果圖如下

在這里插入圖片描述

第六幀

小球1再直接移動至距離紅色小球右側(cè)200px（形成對稱）

在這里插入圖片描述

顏色變?yōu)?code>rgba(255, 255, 255, 0)（白色鹰贵，但是透明級別為0，視覺上就看不見了）

小球2康嘉、3碉输、4再向右側(cè)移動20px（一個小球的直徑）

 box-shadow: 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1);

效果圖如下

在這里插入圖片描述

第七幀

小球1停留在第六幀的位置（紅色小球右側(cè)200px處）
小球2移動至小球1的位置，顏色變?yōu)?code>rgba(255, 255, 255, 0)（
小球3亭珍、4向右移動20px

 box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1);

效果圖如下

在這里插入圖片描述

第八幀

小球1敷钾、2停留在紅色小球右側(cè)200px處
小球3移動至小球1、2的位置肄梨，顏色變?yōu)?code>rgba(255, 255, 255, 0)
小球4向右移動20px

  box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1);

效果圖如下

在這里插入圖片描述

第九幀

小球4最后也移動至紅色小球右側(cè)200px處阻荒，顏色變?yōu)橥该?/li>

box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);

效果圖如下

在這里插入圖片描述

各幀之間使用linear速度曲線平穩(wěn)過渡

綜上，動畫代碼為

 animation: loading 4s linear infinite;

/*動畫實現(xiàn)*/
@keyframes loading {
/*第一幀*/
  0% {
    box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  /*第二幀*/
  12% {
    box-shadow: 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  /*第三幀*/
  25% {
    box-shadow: 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  }
  /*第四幀*/
  36% {
    box-shadow: 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1), 0px 0 rgba(255, 255, 255, 0);
  }
  /*第五幀*/
  50% {
    box-shadow: 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1), 100px 0 rgba(255, 255, 255, 1);
  }
  /*第六幀*/
  62% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1), 120px 0 rgba(255, 255, 255, 1);
  }
  /*第七幀*/
  75% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1), 140px 0 rgba(255, 255, 255, 1);
  }
  /*第八幀*/
  87% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 160px 0 rgba(255, 255, 255, 1);
  }
  /*第九幀*/
  100% {
    box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  }
}

效果圖如下

在這里插入圖片描述

步驟4

注釋掉span的背景色（取消紅色）

效果圖如下

在這里插入圖片描述

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末众羡，一起剝皮案震驚了整個濱河市侨赡，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌粱侣，老刑警劉巖羊壹，帶你破解...
沈念sama閱讀 218,607評論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異齐婴，居然都是意外死亡油猫，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,239評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門柠偶，熙熙樓的掌柜王于貴愁眉苦臉地迎上來眨攘，“玉大人主慰，你說我怎么就攤上這事■晔郏” “怎么了共螺？”我有些...
開封第一講書人閱讀 164,960評論 0贊 355
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長情竹。經(jīng)常有香客問我藐不，道長，這世上最難降的妖魔是什么秦效？我笑而不...
開封第一講書人閱讀 58,750評論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任雏蛮，我火速辦了婚禮，結(jié)果婚禮上阱州，老公的妹妹穿的比我還像新娘挑秉。我一直安慰自己，他們只是感情好苔货，可當我...
茶點故事閱讀 67,764評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布犀概。她就那樣靜靜地躺著，像睡著了一般夜惭。火紅的嫁衣襯著肌膚如雪姻灶。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,604評論 1贊 305
城市分裂傳說
那天诈茧，我揣著相機與錄音产喉，去河邊找鬼。笑死敢会，一個胖子當著我的面吹牛曾沈，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播鸥昏，決...
沈念sama閱讀 40,347評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼塞俱，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了互广？” 一聲冷哼從身側(cè)響起敛腌，我...
開封第一講書人閱讀 39,253評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎惫皱，沒想到半個月后像樊，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,702評論 1贊 315
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡旅敷，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,893評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年生棍，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片媳谁。...
茶點故事閱讀 40,015評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡涂滴，死狀恐怖友酱，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情柔纵，我是刑警寧澤缔杉，帶...
沈念sama閱讀 35,734評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站搁料，受9級特大地震影響或详，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜郭计，卻給世界環(huán)境...
茶點故事閱讀 41,352評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一霸琴、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧昭伸，春花似錦梧乘、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,934評論 0贊 22
一樁弒父案选调，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至辑莫，卻和暖如春学歧，著一層夾襖步出監(jiān)牢的瞬間罩引，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,052評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谐丢，地道東北人淘衙。一個月前我還...
沈念sama閱讀 48,216評論 3贊 371
代替公主和親
正文我出身青樓，卻偏偏與公主長得像剔桨，于是被迫代替她去往敵國和親屉更。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 44,969評論 2贊 355

「HTML+CSS」--自定義加載動畫【047】

效果展示

Demo代碼

原理詳解

步驟1

步驟2

步驟3

第一幀

第二幀

第三幀

第四幀

第五幀

第六幀

第七幀

第八幀

第九幀

步驟4

推薦閱讀更多精彩內(nèi)容