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

時間 2021-04-04

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

原文原文鏈接

前言

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

效果展現

Demo代碼

HTMLhtml

<!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代碼flex

border: 10px solid #FFF;

效果圖以下

注動畫

橙色部分仍是96px✖️96px，由於border寬度爲10px，因此使得span實際大小爲116✖️116px

步驟3:設置下邊框爲紅色（重點！）

css代碼ui

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

效果圖以下
spa

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

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

css代碼code

animation: rotation 1s linear infinite;

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

效果圖以下

結語

學習來源：

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

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

相關標籤/搜索

每日一句

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