前言

Hello！小伙伴！
首先非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～
哈哈自我介紹一下
昵稱：海轟
標簽：程式猿一只｜C++選手｜學生
簡介：因C語言結識編程，隨后轉入計算機專業，有幸拿過國獎、省獎等，已保研，目前正在學習C++/Linux（真的真的太難了～）
學習經驗：扎實基礎 + 多做筆記 + 多敲代碼 + 多思考 + 學好英語！
日常分享：微信公眾號【海轟Pro】記錄生活、學習點滴，分享一些源代碼或者學習資料，歡迎關注～

效果展示

在這里插入圖片描述

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的一個程序，希望對您有所幫助，如有錯誤歡迎小伙伴指正～

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

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

謝謝支持??

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/278470.html

標籤：其他

上一篇：單片機控制OLED12864顯示屏之模塊化編程

下一篇：VMware虛擬化專案中經常使用的三種磁盤置備模式 vmware- vsphere- datastore-disk

「HTML+CSS」--自定義加載影片【026】

前言

效果展示

Demo代碼

原理詳解

步驟1

步驟2

步驟3

步驟4

結語