前言

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: 10px solid transparent;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  border-bottom-color: #FF3D00;

  border-top-color: #FF3D00;

  animation: rotation 1s linear infinite;

}

span::after{

  position: relative;

  content: '';

  display: inline-block;

  width:  72px;

  height:  72px;

  border-radius: 50%;

  border: 10px solid transparent;

  border: 10px solid #fff;

}

@keyframes rotation {

  0% { transform: rotate(0deg) }

  100% { transform: rotate(360deg)

  }

}

原理解释

动画的核心部分就是span和span::after，section仅作为提示框。

步骤1

将span元素设置为

  • 一个96️96px的正方形
  • 边框为10px，白色，solid
    width : 96px;

    height: 96px;

    border: 10px solid #fff;

效果图如下

步骤2

span::after伪元素设置为：

  • 位于span正中
  • 边长72️72px的正方形

注：红色部分即为span::after，为便于观察才设置为红色

步骤3

span::after设置

  • 边框：10px 白色 solid
    border: 10px solid white;

注：

  • 此时的span::after变成了变成（72+10+10）px 的正方形

步骤4

span

  • 下边框设置为红色
  • 上边框设置为红色
border-bottom-color: #FF3D00;

border-top-color: #FF3D00;

效果图如下

步骤5

span和span::after

  • 圆角设置：50%
border-radius: 50%;

效果图如下

步骤6

span

  • 四边框颜色为透明
border: 10px solid transparent;

步骤7

为span添加动画

animation: rotation 1s linear infinite;


/*动画实现*/

  @keyframes rotation {

    0% { transform: rotate(0deg) }

    100% { transform: rotate(360deg)

    }

效果图如下

结语

学习来源：

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

文章仅作为学习笔记，记录从0到1的一个过程。希望对您有所帮助，如有错误欢迎小伙伴指正～

我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧

写作不易，「点赞」+「收藏」+「转发」

谢谢支持️

「HTML+CSS」--自定义加载动画【009】的更多相关文章

  1. 「HTML+CSS」--自定义加载动画【008】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  2. 「HTML+CSS」--自定义加载动画【007】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  3. 「HTML+CSS」--自定义加载动画【010】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  4. 「HTML+CSS」--自定义加载动画【011】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  5. 「HTML+CSS」--自定义加载动画【014】【疑问未解决】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  6. 「HTML+CSS」--自定义加载动画【015】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  7. 「HTML+CSS」--自定义加载动画【016】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  8. 「HTML+CSS」--自定义加载动画【017】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  9. 「HTML+CSS」--自定义加载动画【026】

    效果展示 Demo代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. How to implement an accurate countdown timer with js

    How to implement an accurate countdown timer with js 如何用 js 实现一个精确的倒计时器 原理剖析 web worker js custom ti ...

  2. VAST算力增值效应，助力NGK全生态产业链！

    虽然比特币和区块链在2009年就诞生了,但它们对于一些人来说好像还是很遥远,归根结底还是由于数字货币始终未能在全球真正实现流通和支付功能.区块链1.0,以比特币为代表,实现了数字支付:区块链2.0,E ...

  3. Captain technology INC：全球新能源汽车格局突变

    美国能源信息署EIA的统计数据显示,2020年上半年全美含纯电动和插电混动在内的新能源乘用车总销量仅为11.1万辆,同比缩水25%.虽然特斯拉在第三季度靠着13.93万辆的销量迎来了环比387%.同比 ...

  4. 解决ROS及Fast-RTPS安装和使用中raw.githubusercontent.com无法连接的问题

    资料参考: https://blog.csdn.net/weixin_44692299/article/details/105869229

  5. 03_MySQL重置root密码

    重设root密码

  6. 用Python实现一个“百度翻译”

    import requests import json s = input("请输入你要翻译的内容:") headers = {"User-Agent":&qu ...

  7. JDK源码阅读-FileDescriptor

    本文转载自JDK源码阅读-FileDescriptor 导语 操作系统使用文件描述符来指代一个打开的文件,对文件的读写操作,都需要文件描述符作为参数.Java虽然在设计上使用了抽象程度更高的流来作为文 ...

  8. js获取数字数组最大值的几种方式

    原生Math.max方法 Math.max 方法不能接收数组,可以使用ES6的...将数组打散 const arr = [111, 12, 111, 34, 2, 5, 76]; console.lo ...

  9. 自己写的一个抢票加速的Python小程序源码分享-----纯属娱乐

    最近这段时间频频看到微信群里发什么 抢票加速,智行.携程.飞猪.美团,对于我这能坐客车就不坐火车的人来说,无所谓靠谱不靠谱 突发奇想的整理了下整个抢票加速的逻辑,写了这个小程序,代码很low,拒绝批评 ...

  10. pyhton的函数

    目录 一.函数引入 二.函数的定义 三.如何定义一个函数 四.定义函数的三种形式 1.空函数 2.有参函数 3.无参函数 五.函数的调用 六.函数的返回值 七.函数的参数 1.形参 1.1 位置形参 ...