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

時間 2021-07-26

標籤 css html 編程學習 flex 動畫 spa code orm 欄目 CSS 简体版

原文原文鏈接

前言

Hello！小夥伴！
很是感謝您閱讀海轟的文章，假若文中有錯誤的地方，歡迎您指出～

自我介紹 ଘ(੭ˊᵕˋ)੭
暱稱：海轟
標籤：程序猿｜C++選手｜學生
簡介：因C語言結識編程，隨後轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C++/Linux（真的真的太難了～）
學習經驗：紮實基礎 + 多作筆記 + 多敲代碼 + 多思考 + 學好英語！css

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

效果展現（初始版）

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)
  }
}

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

感受要是下方能夠固定住就好了，爲此，在源代碼基礎上修改了一下，獲得改進後的效果，以下：動畫

效果展現（改進版）

Demo代碼

HTMLui

<!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>

CSSspa

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標籤，設置爲code

相對定位
寬度：12px 高度：64px
border-radius: 4px
背景色：白色
colore：白色

span {
  width: 12px;
  height: 64px;
  border-radius: 4px;
  position: relative;
  background: white;
  color: white;
}

效果圖以下orm

步驟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)
  }
}

獲得最終效果：