【動畫消消樂】HTML+CSS 自定義加載動畫 064（currentColor的妙用！）

時間 2021-07-25

標籤 css html 編程學習 flex 動畫 spa 3d code 欄目 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: 24px;
  height: 24px;
  box-shadow: 0 30px, 0 -30px;
  border-radius: 4px;
  background: currentColor;
  display: inline-block;
  position: relative;
  color: white;
  left: -30px;
  animation: loading 2s ease infinite;
}

span::before, span::after {
  content: '';
  width: 24px;
  height: 24px;
  box-shadow: 0 30px, 0 -30px;
  border-radius: 4px;
  background: currentColor;
  color: whites;
  position: absolute;
  left: 30px;
  top: 0;
  /* animation: loading 2s 0.2s ease infinite; */
}

span::after {
  animation-delay: 0.4s;
  left: 60px;
}

@keyframes loading {
  0% {
    top: 0;
    color: rgba(255, 255, 255, 1)
  }
  50% {
    top: 30px;
    color: rgba(255, 255, 255, 0.2)
  }
  100% {
    top: 0;
    color: rgba(255, 255, 255, 1)
  }
}

原理詳解

步驟1

使用span標籤，設置爲flex

相對定位
寬度、高度均爲24px
背景色：currentColor
color：白色
border-radius: 4px

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

效果圖以下動畫

爲何背景色須要設置爲currentColor呢？ui

首先須要知道currentColor屬性spa

currentColor表明了當前元素被應用上的color顏色值。使用它能夠將當前這個顏色值應用到其餘屬性上，或者嵌套元素的其餘屬性上。3d

簡單理解：
CSS裏能夠在任何須要寫顏色的地方使用currentColor這個變量，這個變量的值是當前元素的color值。若是當前元素沒有在CSS裏顯示地指定一個color值，那它的顏色值就聽從CSS規則，從父級元素繼承而來。code

在這裏設置了span的color屬性爲白色，因此背景色也就是color屬性的值：白色

設置color爲白色是爲了使得陰影爲白色（以後會使用span的陰影）

在後面步驟中將說明若是不使用currentColor而直接使用white（白色）出現的狀況

步驟2

使用box-shadow爲span添加兩個陰影

位置分別位於span上方和下方

box-shadow: 0 30px,/*陰影1*/
  			 0 -30px; /*陰影2*/

效果圖以下

步驟3

將span左移30px

span {
  left: -30px;
}

效果圖以下

步驟4

使用span::before、span::after僞元素

設置爲

絕對定位（ left: 30px top: 0）
寬度、高度均爲24px
border-radius: 4px
背景色：currentColor
color：白色

span::before, span::after {
  content: '';
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: currentColor;
  color: white;
  position: absolute;
  left: 30px;
  top: 0;
}

效果圖以下

步驟5

爲span::before、span::after添加兩個陰影

span::before, span::after {
  box-shadow: 0 30px, 0 -30px; 
}

效果圖以下

陰影位置圖：

步驟6

分離span::before、span::after

將span::after 再向右移動 30px（由於是絕對定位，因此相對於span爲向右60px）

span::after {
  left: 60px;
}

效果圖以下

before和after位置關係圖：

步驟7

爲span添加動畫

效果描述爲

第一幀：初始位置
第二幀：向下移動30px 同時顏色透明級別由1變爲0.2
第三幀：回到最初位置

動畫說明：

使用top設置變量實現span的豎直方向移動
動畫持續時間：2s
速度曲線：ease
無限循環

代碼爲：

span {
  animation: loading 2s ease infinite;
}

@keyframes loading {
  0% {
    top: 0;
    color: rgba(255, 255, 255, 1)
  }
  50% {
    top: 30px;
    color: rgba(255, 255, 255, 0.2)
  }
  100% {
    top: 0;
    color: rgba(255, 255, 255, 1)
  }
}

效果圖以下

注意：此時span::before和span::after也是和span一塊兒運動只是顏色不會發生變化 由於before和after的位置關係是相對於span的絕對定位

步驟8

爲span::before和span::after添加一樣的動畫

延遲0.2s執行

span::before, span::after {
  animation: loading 2s 0.2s ease infinite;
}

效果圖以下

步驟9

將span::after動畫延遲設置爲0.4s

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

效果圖以下

疑問解答

若是將span、span::before、span::after的背景色不設置爲currentColor，而是直接設置爲white（白色）

效果則是

能夠發現span、span::before、span::after的顏色一直都是白色，沒有發生變化

這是由於在動畫中設置的顏色變化是color屬性，而不是背景色（background-color）屬性，因此動畫發生時，span、span::before、span::after的顏色一直都會是設置的白色

爲了使span、span::before、span::after的背景色也隨之變化，故使用currentColor參數，使得span、span::before、span::after的背景色保持和color屬性值一致，color變化，背景色也隨之變化，實現目標效果

結語

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

但願對您有所幫助，若有錯誤歡迎小夥伴指正～

我是海轟ଘ(੭ˊᵕˋ)੭，若是您以爲寫得能夠的話，請點個贊吧

謝謝支持❤️

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。