【動畫消消樂】HTML+CSS 自定義載入動畫 065

海轟Pro發表於2021-07-25
動畫HTMLCSS

前言

Hello！小夥伴！
非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～
 
自我介紹 ଘ(੭ˊᵕˋ)੭
暱稱：海轟
標籤：程式猿｜C++選手｜學生
簡介：因C語言結識程式設計，隨後轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C++/Linux（真的真的太難了～）
學習經驗：紮實基礎 + 多做筆記 + 多敲程式碼 + 多思考 + 學好英語！

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

效果展示（初始版）

在這裡插入圖片描述

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;
  /* 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: 12px;
  height: 64px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  background: currentColor;
  color: white;
  /* background-color: red; */
  animation: animloader61m 1s 1s linear infinite alternate;
}

span::before, span::after {
  content: '';
  width: 12px;
  height: 64px;
  border-radius: 4px;
  background: currentColor;
  position: absolute;
  bottom: 0;
  left: 20px;
  animation: animloader61 1s 1.5s linear infinite alternate;
}

span::after {
  left: -20px;
  animation-delay: 0s;
}

@keyframes animloader61 {
  0% {
    height: 64px;
  }
  100% {
    height: 5px;
  }
}

@keyframes animloader61m {
  0% {
    height: 64px;
    transform: translateY(0);
  }
  100% {
    height: 15px;
    transform: translateY(30px)
  }
}

仔細觀察效果圖，其實可以明顯發現整個白色部分整體也在上下移動，只是移動距離較小。

感覺要是下方可以固定住就行了，為此，在原始碼基礎上修改了一下，得到改進後的效果，如下：

效果展示（改進版）

在這裡插入圖片描述

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;
  /* 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: 12px;
  height: 64px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  background: white;
  color: white;
  animation: loading 1s 1s linear infinite alternate;
}

span::before, span::after {
  /* content: ''; */
  width: 12px;
  height: 64px;
  border-radius: 4px;
  background: currentColor;
  position: absolute;
  bottom: 0;
  left: 20px;
  animation: loadingx 1s 1.5s linear infinite alternate;
}

span::after {
  left: -20px;
  animation-delay: 0s;
}


@keyframes loadingx {
  0% {
    height: 64px;
  }
  100% {
    height: 14px;
  }
}

@keyframes loading {
  0% {
    height: 64px;
    transform: translateY(0);
  }
  100% {
    height: 14px;
    transform: translateY(25px)
  }
}

原理詳解

步驟1

使用span標籤，設定為

  • 相對定位
  • 寬度：12px 高度：64px
  • border-radius: 4px
  • 背景色：白色
  • colore：白色
span {
  width: 12px;
  height: 64px;
  border-radius: 4px;
  position: relative;
  background: white;
  color: white;
}

效果圖如下

在這裡插入圖片描述

步驟2

為span新增動畫

效果簡單描述為：長度由長變短，再變短，依次迴圈

如果只是簡單的設定height屬性的變化

  • 初始狀態：height=64px
  • 末尾狀態：heigth=14px

程式碼為：

span {
  animation: loading 1s  linear infinite alternate;
}

@keyframes loading {
  0% {
    height: 64px;
  }
  100% {
    height: 14px;
  }
}

產生的效果如下

在這裡插入圖片描述

這是因為海轟事先將span設定為水平、豎直均位於頁面中間的，所以僅長度變化產生的效果圖如上

如何實現span一頭固定、一頭延伸呢？

這裡就需要利用translateY屬性了，不清楚的可以查查，其實就是二維平面y軸變換

  • 初始狀態：height=64px transform: translateY(0)
  • 末尾狀態：height=14px transform: translateY(25px)

注： 25px=（64-14）/2 px

在這裡插入圖片描述
程式碼為：

span {
  animation: loading 1s  linear infinite alternate;
}

@keyframes loading {
  0% {
    height: 64px;
    transform: translateY(0);
  }
  100% {
    height: 14px;
    transform: translateY(25px)
  }
}

span動畫效果如下

在這裡插入圖片描述

步驟3

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

設定為

  • 絕對定位（ bottom: 0 left: 20px，固定在底部）
  • 寬度為12px 高度為64px
  • 背景色：currentColor（這裡其實之間設定白色也行）

span::before, span::after {
  content: '';
  width: 12px;
  height: 64px;
  border-radius: 4px;
  background: currentColor;
  position: absolute;
  bottom: 0;
  left: 20px;
}

span與span::before位置關係如下

在這裡插入圖片描述

步驟4

分離span::before和span::after

將span::after位置移動至span左邊

span::after {
  left: -20px;
}

位置關係如下

在這裡插入圖片描述

步驟5

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

只涉及長度改變

span::before, span::after {
  animation: loadingx 1s linear infinite alternate; 
}

@keyframes loadingx {
  0% {
    height: 64px;
  }
  100% {
    height: 14px;
  }
}

span::before和span::after動畫如下（span動畫不生效時）

在這裡插入圖片描述

為什麼這裡就不需要使用translateY屬性了呢？

海轟的理解：因為span::before、span::after的位置是同span一樣的，span已經設定了，那麼before和after就不需要設定了

如果再設定translateY

產生的效果圖如下

在這裡插入圖片描述

步驟6

同時開啟span、span::before、span::after動畫

同時分別設定動畫開始延時

  • span：延時1s
  • span::before：延時1.5s
  • span::after：延時0s

注：具體資料依據自己喜好設定即可，只需要保障各部分動畫開始時有時間間隔就行

最後程式碼如下：

span {
  animation: loading 1s 1s linear infinite alternate;
}

span::before, span::after {
  animation: loadingx 1s 1.5s linear infinite alternate;
}

span::after {
  animation-delay: 0s;
}


@keyframes loadingx {
  0% {
    height: 64px;
  }
  100% {
    height: 14px;
  }
}

@keyframes loading {
  0% {
    height: 64px;
    transform: translateY(0);
  }
  100% {
    height: 14px;
    transform: translateY(25px)
  }
}

得到最終效果：

在這裡插入圖片描述

結語

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

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

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

謝謝支援❤️
在這裡插入圖片描述

相關文章