前言

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 #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    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-bottom-color: #FF3D00;

  }

  @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 transparent;

    border-bottom-color: #FF3D00;

步骤4

span和span::after

  • border-radius均设置为50%
border-radius: 50%;

效果图如下

步骤5

为span添加动画

animation: rotation 1s linear infinite;


/*动画实现*/

  @keyframes rotation {

    0% { transform: rotate(0deg) }

    100% { transform: rotate(360deg)

    }

效果图如下

结语

学习来源：

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

css只会一点点，学习之余从喜欢看一些大神级别的css效果展示，根据源码一点一点学习知识点，文中有不对的地方，欢迎指出～

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. free open music API all in one

    free open music API all in one music API SoundCloud xgqfrms · free https://w.soundcloud.com/player/? ...

  2. React & react-native & vue & cli & environment information & report bugs

    React & react-native & vue & cli & environment information & report bugs cli che ...

  3. linux move file / folder bash command

    linux move file / folder bash command mv $ which mv $ man mv # mv [-f] source target/ target folder ...

  4. NGK公链：去中心化交易+挖矿生态体系共舞

    NGK生态公链是一个安全.透明.专业的去中心化商业应用平台.作为一条具有技术信任甚至是公众信任的公链,NGK以区块链技术为支撑,利用区块链透明.公正.公开.数据不可篡改.分布式存储.可追溯等技术优势, ...

  5. go好用的类型转换第三方组件

    Cast介绍 开源地址 https://github.com/spf13/cast Cast是什么? Cast是一个库,以一致和简单的方式在不同的go类型之间转换. Cast提供了简单的函数,可以轻松 ...

  6. mysql数据库表引入redis解决方案

    缓存方案 缓存方案在我的另外一篇博客里有详细说明,地址:https://www.cnblogs.com/wingfirefly/p/14419728.html 数据结构: 方案1: 1.存储结构采用h ...

  7. Scrapy项目_阳光热线问政平台

    目的: 爬取阳光热线问政平台问题中每个帖子的标题.详情URL.详情内容.图片以及发布时间 步骤: 1.创建爬虫项目 1 scrapy startproject yangguang 2 cd yangg ...

  8. AtCoder Regular Contest 113

    比赛地址 A(暴力) 题目链接 题目: 给出\(K\),求出满足\(A\times B\times C\le K\)的\((A,B,C)\)对数 解析: 将C移动到等式右边,得到\(A\times B ...

  9. Spring的BeanFactoryPostProcessor接口

    接口简介 BeanFactoryPostProcessor 接口是 Spring 初始化 BeanFactory 时对外暴露的扩展点,Spring IoC 容器允许 BeanFactoryPostPr ...

  10. linux系统忘记root的登录密码

    参考链接:https://www.jb51.net/article/146541.htm  亲测有效 使用场景 linux管理员忘记root密码,需要进行找回操作. 注意事项:本文基于centos7环 ...