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

海轟Pro發表於2021-04-04
HTMLCSS動畫

前言

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 class="loader-1"></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;
}
.loader-1 {
  width : 96px;
  height: 96px;
  background: orange;
  border: 10px solid #FFF;
  border-bottom-color: #FF3D00;
  border-radius: 50%;
  display: inline-block;
  animation: rotation 1s linear infinite;
}
@keyframes rotation {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

原理解釋

步驟1:生成一個邊長為96px的正方形

css程式碼

 width : 96px;
  height: 96px;
  background: orange;

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

步驟2:設定該正方形的border

css程式碼

border: 10px solid #FFF;

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

  • 橙色部分還是96px✖️96px，因為border寬度為10px，所以使得span實際大小為116✖️116px

步驟3:設定下邊框為紅色（重點！）

css程式碼

 border-bottom-color: #FF3D00;//設定下邊框顏色

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

步驟4:設定border-radious=50%，將正方形變成圓形

在這裡插入圖片描述

步驟5:設定動畫，繞中心一直旋轉

css程式碼

animation: rotation 1s linear infinite;

// 動畫實現 
@keyframes rotation {
  0% { 
  	transform: rotate(0deg) 
  }
  100% { 
  	transform: rotate(360deg) 
  }
}

效果圖如下

在這裡插入圖片描述

結語

學習來源：

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

css只會一點點，學習之餘從喜歡看一些大神級別的css效果展示，根據原始碼一點一點學習知識點，文中有不對的地方，歡迎指出～

在這裡插入圖片描述

相關文章