前言

Hello！小夥伴！

非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～

 

自我介紹 ଘ(੭ˊᵕˋ)੭

暱稱：海轟

標籤：程式猿｜C++選手｜學生

簡介：因C語言結識程式設計，隨後轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C++/Linux（真的真的太難了～）

學習經驗：紮實基礎 + 多做筆記 + 多敲程式碼 + 多思考 + 學好英語！

 

【動畫消消樂】 平時學習生活比較枯燥，無意之間對一些網頁、應用程式的過渡/載入動畫產生了濃厚的興趣，想知道具體是如何實現的？ 便在空閒的時候學習下如何使用css實現一些簡單的動畫效果，文章僅供作為自己的學習筆記，記錄學習生活，爭取理解動畫的原理，多多“消滅”動畫！

Demo



Demo程式碼如下：

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="style.css">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11.     <section><span></span></section>
  12. </body>
  13. </html>

CSS

  1. html, body {
  2.   margin: 0;
  3.   height: 100%;
  4. }
  6. body {
  7.   display: flex;
  8.   justify-content: center;
  9.   align-items: center;
  10.   background: #222f3e;
  11.   /* background-color: #82466e; */
  12.   animation: backColor 4s infinite;
  13. }
  15. section {
  16.   width: 650px;
  17.   height: 300px;
  18.   padding: 10px;
  19.   position: relative;
  20.   display: flex;
  21.   align-items: center;
  22.   justify-content: center;
  23.   border: 2px solid white;
  24. }
  26. span {
  27.   width: 8px;
  28.   height: 40px;
  29.   border-radius: 4px;
  30.   display: inline-block;
  31.   position: relative;
  32.   background: white;
  33.   color: white;
  34.   animation: loading 0.6s 0s linear infinite alternate;
  35. }
  37. span::before, span::after {
  38.   content: '';
  39.   width: 8px;
  40.   height: 40px;
  41.   border-radius: 4px;
  42.   background: white;
  43.   position: absolute;
  44.   top: 50%;
  45.   transform: translateY(-50%);
  46.   left: 20px;
  47.   animation: loading 0.6s 0.3s linear infinite alternate;
  48. }
  50. span::after {
  51.   left: -20px;
  52.   animation-delay: 0.6s;
  53. }
  55. @keyframes loading {
  56.   0% {
  57.     height: 64px;
  58.   }
  59.   100% {
  60.     height: 5px;
  61.   }
  62. }

原理詳解

步驟1

使用span標籤，設定為

  • 寬度：8px
  • 高度：40px
  • 背景色：白色
  • color：白色
  • 相對定位
  • border-radius: 4px
  1. span {
  2.   width: 8px;
  3.   height: 40px;
  4.   border-radius: 4px;
  5.   position: relative;
  6.   background: white;
  7.   color: white;
  8. }

效果圖如下

步驟2

為span新增動畫

動畫效果描述為：span的長度從短變長再變短

具體設定：

  • 初始狀態：高度64px
  • 末尾狀態：高度5px

動畫設定為

  • 持續時間0.6s
  • 開始延遲0s
  • 速度曲線：linear，均勻變化
  • 無限迴圈
  • 動畫交替進行
  1. animation: loading 0.6s 0s linear infinite alternate;
  1. @keyframes loading {
  2.   0% {
  3.     height: 64px;
  4.   }
  5.   100% {
  6.     height: 5px;
  7.   }
  8. }

效果圖如下

注：產生上述條件的前提是海轟事先將span設定為頁面居中（上下左右都居中）

步驟3

使用span::before和span::after偽元素

先同時設定

其屬性設定為

  • 絕對定位（left：20px）
  • 寬度：8px
  • 高度：40px
  • border-radius: 4px
  • 背景色：白色
  1. span::before, span::after {
  2.   content: '';
  3.   width: 8px;
  4.   height: 40px;
  5.   border-radius: 4px;
  6.   background: white;
  7.   position: absolute;
  8.   left: 20px;
  9. }

效果圖如下



注：上述效果圖span動畫暫時不生效

當span動畫生效時，效果如下

可以發現：右邊的白色部分最上部分一直與左邊最上部分處於同一水平線

步驟4

為了將span::before、span::after固定，不隨span上下移動

設定

  1. span::before, span::after {
  2.   top: 50%;
  3.   transform: translateY(-50%);
  4. }

效果圖為

步驟5

為span::before和span::after新增動畫

效果同span的動畫一樣，只是動畫開始延遲0.3s，與span動畫形成前後關係即可

  1. span::before, span::after {
  2.   animation: loading 0.6s 0.3s linear infinite alternate;
  3. }
  1. @keyframes loading {
  2.   0% {
  3.     height: 64px;
  4.   }
  5.   100% {
  6.     height: 5px;
  7.   }
  8. }

效果圖如下

步驟6

分離span::before和span::after

單獨再設定span::after

  • 定位為span左邊20px處
  • 動畫開始延遲時間為0.6s
  1. span::after {
  2.   left: -20px;
  3.   animation-delay: 0.6s;
  4. }

位置關係如下



最終效果為：

疑問解答

為什麼步驟四中 top: 50%; transform: translateY(-50%);可以將span::after、before固定頁面上下中間呢？

為了弄清楚原理

首先我們先假設span高度為20px，寬度為8px

before和after位置定位時只設置left為20px（高度為40px）

效果圖如下

然後為before和after設定top: 50%;

效果圖如下



可以發現右邊的before和after向下移動了，而實際移動的距離就span總長度20px一半（50%）的距離：10px



通過實際效果展示可以發現：此時span::before和span::after中設定的top為50%，基準是相對於span的

比如span長100px，如果before為top：50%，那麼就是向下移動100* 50% = 50px；如果span長40px，那麼before和after就下移20px

總之，top是相對於span進行參考的！

再設定 translateY(-50%);

效果圖如下



可以發現此時span和span::after、before中心處於同一軸線上

這是因為translateY(-50%)中的50%是指移動相對於自身的50%

此時before和after長為40px，那麼自身長度的50%為40*50%=20px



這樣一來，span和before、after中心就會處於同一水平線上

再一般的說

無論span長度為多少、span::before、span::after長度為多少，只要配合 top: 50%; transform: translateY(-50%);，都可以使得它們中心處於同一水平線上

一般情況時：

結語

文章僅作為學習筆記，記錄從0到1的一個過程

希望對您有所幫助，如有錯誤歡迎小夥伴指正～

我是海轟ଘ(੭ˊᵕˋ)੭，如果您覺得寫得可以的話，請點個贊吧

謝謝支援️