前言

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="https://www.cnblogs.com/haihongpro/p/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-top: 10px solid white;
  border-right: 10px solid transparent;
  animation: rotation 2s linear infinite;
}
span::after{
  content: '';
      position: absolute;
      left: 0;
      top: 0;
      width : 96px;
      height: 96px;
      border-radius: 50%;
      border-bottom:10px solid red;
      border-left:10px solid transparent;
}

@keyframes rotation {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

原理詳解

步驟1

設定span標簽

寬度、高度均為96px

  width : 96px;
  height: 96px;

效果圖如下
在這里插入圖片描述
span此時是沒有顯示出來的

因為沒有設定顏色
在這里插入圖片描述

步驟2

span上邊框設定為

10px solid 白色

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

步驟3

span右邊框設定為

10px solid 透明色

效果圖如下
在這里插入圖片描述
為什么再設定右邊框就會變成這樣了呢？

這里如果設定右邊框的顏色為紅色

根據下圖就可以知道上圖是怎么來的了（用透明色替換下圖中紅色）
在這里插入圖片描述

步驟4

設定span::after

絕對定位 left:0 top:0
寬度、高度均為96px

效果圖如下

在這里插入圖片描述
因為沒有為span::after設定背景色

視覺上就沒有顯示出來

實際是存在的
在這里插入圖片描述
這里用紫色表示一下span::after

就可以觀察到了
在這里插入圖片描述

步驟5

設定span::after，使得下邊框為10px solid 紅色

border-bottom:10px solid red;

效果圖如下

在這里插入圖片描述

步驟6

再設定span::after左邊框：10px solid 透明

border-left:10px solid transparent;

效果圖如下

在這里插入圖片描述
注：紅色部分的生成方法其實與白色部分完全相同，

步驟7

span、span::after圓角化

border-radius: 50%;

效果圖如下

在這里插入圖片描述

步驟8

為span添加影片

順時針旋轉（0-360度） 2s 無限回圈

 animation: rotation 2s linear infinite;

/*影片實作*/
@keyframes rotation {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

效果圖如下

在這里插入圖片描述

結語

學習來源：

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

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

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

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

謝謝支持??

在這里插入圖片描述

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

標籤：Html/Css

上一篇：electron-vue配置問題

下一篇：「HTML+CSS」--自定義加載影片【022】