前言

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 white;

  border-style: solid  solid dotted dotted ;

  border-radius: 50%;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  animation: rotation 2s linear infinite;

}

span::before{

  position: relative;

  content: '';

  width:  48px;

  height:  48px;

  border: 10px  red solid;

  border-style: solid  solid  dotted ;

  border-radius: 50%;

  /* 注意这里的时间 */

  animation: rotationback 1s linear infinite;

}

@keyframes rotation {

  0% { transform: rotate(0deg) }

  100% { transform: rotate(360deg)

  }

}

@keyframes rotationback {

  0% { transform: rotate(360deg) }

  100% { transform: rotate(0deg)

  }

}

原理详解

步骤1

使用span标签作为外围白色部分，并设置

  • 宽度、高度均为96px
  • 边框：白色 10px solid
 width : 96px;

  height: 96px;

  border: 10px solid white;

效果图如下

步骤2

设置span边框

  • 上/右边框为solid
  • 下/左边框为dotter（点状）
border-style: solid  solid dotted dotted ;

效果图如下

步骤3

使用span::before作为红色部分，并设置

  • 相对定位
  • 宽度、高度均为48px
  • 边框：10px 红色 solid
  • 位于白色正方形 正中间（这里使用的是：在span中使用flex布局）
  width:  48px;

  height:  48px;

  border: 10px  red solid;

效果图如下

步骤4

设置span::before边框

  • 下边框为dotted
  • 其余为solid
  border-style: solid  solid  dotted ;

效果图如下

步骤5

span、span::before圆角化

border-radius: 50%;

效果图如下

步骤6

为span添加动画

  • 顺时针 2s 无限循环
animation: rotation 2s linear infinite;


/*动画实现*/

@keyframes rotation {

  0% { transform: rotate(0deg) }

  100% { transform: rotate(360deg)

  }

}

效果图如下

步骤7

为span::before设置动画

-逆时针 1s 无限循环

/*注意时间*/

animation: rotationback 1s linear infinite;


/*动画实现*/

@keyframes rotationback {

  0% { transform: rotate(360deg) }

  100% { transform: rotate(0deg)

  }

}

效果图如下

结语

学习来源：

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

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

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

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

谢谢支持️

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

  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」--自定义加载动画【017】

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

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

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

随机推荐

  1. 为什么ElasticSearch比MySQL更适合全文索引

    熟悉 MySQL 的同学一定都知道,MySQL 对于复杂条件查询的支持并不好.MySQL 最多使用一个条件涉及的索引来过滤,然后剩余的条件只能在遍历行过程中进行内存过滤,对这个过程不了解的同学可以先行 ...

  2. 进阶高阶IoT架构-教你如何简单实现一个消息队列

    前言 消息队列是软件系统领域用来实现系统间通信最广泛的中间件.基于消息队列的方式是指由应用中的某个系统负责发送消息,由关心这条消息的相关系统负责接收消息,并在收到消息后进行各自系统内的业务处理.消息可 ...

  3. 关于MVCC，我之前写错了，这次我改好了！

    关于MVCC的原理,在<我想进大厂>之mysql夺命连环13问写过一次,但是当时写的其实并不准确,这个理解可以应付面试,帮助快速理解,但是他的真正实现原理我想再次拿出来说一说. 简单理解版 ...

  4. oracle 导入导出dmp

    exp 用户名/密码@地址:端口/serviceName file=D:\710.dmp exp test710/test710@192.168.15.134:1521/doit file=D:\71 ...

  5. 第41天学习打卡（死锁 Lock synchronized与Lock的对比 线程协作 使用线程池）

    死锁 多个线程各自占有一些共享资源,并且互相等待其他线程占有的资源才能运行,而导致两个或者多个线程都在等待对方释放资源,都停止执行的情形.某一个同步块同时拥有"两个以上对象的锁"时 ...

  6. 后端程序员之路 55、go redis

    redigo有点像hiredis,只提供了最基本的连接和执行命令接口. 找到个不错的redis库: https://github.com/go-redis/redis func ExampleNewC ...

  7. 后端程序员之路 40、Pthreads

    POSIX线程(POSIX threads),简称Pthreads,是线程的POSIX标准.线程这个东西在操作系统原理里讲得比较清楚了,再加上对windows那一套进程线程的东西比较清楚,所以这里还是 ...

  8. 基于Hi3559AV100 RFCN实现细节解析-（1）VGS初介绍

    下面随笔系列将对Hi3559AV100 RFCN实现细节进行解析,因为RFCN用到了VGS加框,因此本篇随笔将给出VGS视频图像子系统的具体说明,便于后面RFCN的细节实现说明. VGS 是视频图形子 ...

  9. .NET Core Generic Host项目使用Topshelf部署为Windows服务

    1..NET Core Generic Host是什么? 在.NET Core 2.1版本加入了一种新的Host,即Generic Host(通用主机). 现在在2.1版本的Asp.Net Core中 ...

  10. django Form 效验

    Django 登入效验 .py from django import forms from student import models from django.core.exceptions impo ...