「HTML+CSS」--自定義載入動畫【026】

海轟Pro發表於2021-05-02
HTMLCSS動畫

效果展示

在這裡插入圖片描述

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 : 96px;
  height: 96px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 20px solid;
  animation: animloader 2s linear infinite alternate;
}

@keyframes animloader {
  0% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 0)  rgba(255,255,255, 0)  rgba(255,255,255, 0);}
  33% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 0)  rgba(255,255,255, 0);}
  66% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 0);}
  100% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 1);}
}

原理詳解

步驟1

使用span標籤，設定

  • 寬度、高度均為96px
  • 邊框：20px solid

效果圖如下
在這裡插入圖片描述

步驟2

span圓角化

border-radius: 50%;

效果圖如下

在這裡插入圖片描述

步驟3

為span新增動畫

動畫總共分為4幀

第一幀

  • 上邊框顏色設定為：白色 其餘為透明

在這裡插入圖片描述

為了便於觀察

這裡給出未對span圓角化之前的視角

這樣就會更好得理解每一幀的原理
在這裡插入圖片描述

第二幀

  • 上+右 邊框顏色設定為：白色 其餘透明
    在這裡插入圖片描述

未設定border-radius: 50%前的效果如下

在這裡插入圖片描述

第三幀

  • 上+右+下 邊框顏色設定為白色 其餘為透明
    在這裡插入圖片描述

未設定border-radius: 50%前的效果如下

在這裡插入圖片描述

第四幀

  • 上+下+左+右 邊框均為白色
    在這裡插入圖片描述

未設定border-radius: 50%前的效果如下

在這裡插入圖片描述

綜上

變化過程就是：

在這裡插入圖片描述

程式碼如下

 animation: animloader 2s linear infinite ;

/*動畫實現*/
@keyframes animloader {
/*第一幀*/
  0% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 0)  rgba(255,255,255, 0)  rgba(255,255,255, 0);}
  /*第二幀*/
  33% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 0)  rgba(255,255,255, 0);}
    /*第三幀*/
  66% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 0);}
    /*第四幀*/
  100% { border-color: rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 1)  rgba(255,255,255, 1);}
}

注：這裡使用了rgba函式，設定透明級別為0來實現的透明色

效果圖如下

在這裡插入圖片描述

步驟4

從上面的效果中我們可以看出

我們需要的效果是：執行完4幀後，再反向回到動畫初始位置

其實也很簡單

再多設定一個引數即可

設定動畫為：輪流反向播放動畫

animation: animloader 2s linear infinite alternate;

效果如下

在這裡插入圖片描述

注：
在這裡插入圖片描述

結語

學習來源：

https://codepen.io/bhadupranjal/pen/vYLZYqQ

文章僅作為學習筆記，記錄從0到1的一個過程。希望對您有所幫助，如有錯誤歡迎小夥伴指正～

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

寫作不易，「點贊」+「收藏」+「轉發」

謝謝支援❤️

在這裡插入圖片描述

相關文章