前言

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 ;

  border-color: white white transparent;

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

  border-color: transparent red red;

  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

效果图如下

步骤2

设置span标签

  • 上/左/右边框颜色为白色
  • 下边框为透明
border-color: white white transparent;

效果图如下

步骤3

设置span::before伪类

  • 宽度、高度均为48px
  • 下/左/右边框为红色 10px solid
  • 上边框为透明
width:  48px;

  height:  48px;

  border: 10px solid;

  border-color: transparent red red;

再设置span标签为flex布局，使得span::before位于span正中间（上下左右居中）

  display: flex;

  align-items: center;

  justify-content: center;

效果图如下

步骤4

span、span::before圆角化

border-radius: 50%;

效果图如下

步骤5

为span添加动画

  • 顺时针旋转
animation: rotation 2s linear infinite;


/* 顺时针旋转动画*/

@keyframes rotation {

  0% { transform: rotate(0deg) }

  100% { transform: rotate(360deg)

  }

}

效果图如下



注意：此时红色部分是和白色部分同方向旋转的

步骤6

为span::before添加动画

  • 逆时针旋转
/*注意这里的时间*/

animation: rotationback 1s linear infinite;


@keyframes rotationback {

  0% { transform: rotate(360deg) }

  100% { transform: rotate(0deg)

  }

}

效果图如下



注意：此时红色部分和白色部分旋转方向相反

疑问

问题1

在这里span动画是顺时针，时间是2s，span::before设置的是逆时针旋转，时间是1s，但是实际span::before旋转一周的时间却是2s？？？

问题2

在保持span动画不变的情况下，修改span::before动画时间分别为1s 、 2s、4s，会出现逆时针 2s、静止不动、顺时针 4s 的情况？？？

备注：问题暂未解决，还是没有想明白～

结语

学习来源：

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

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

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

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

谢谢支持️

「HTML+CSS」--自定义加载动画【014】【疑问未解决】的更多相关文章

  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」--自定义加载动画【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. RTPS解析

    资料参考: https://blog.csdn.net/HBS2011/article/details/102520704

  2. mysql主从备份说明（win系统）

    1. 环境描述: 主机:192.168.2.201 从机:192.168.2.111 Mysql版本:5.7 2. 主机my.ini配置: log-bin=C:\mysqlback expire-lo ...

  3. 「TcaplusDB知识库」概念（表、键、记录、索引）

       TcaplusDB作为一款NoSQL数据库,语法与传统的SQL关系库有所差异.本文将详细介绍TcaplusDB表.记录.索引这三个数据库中常用术语在TcaplusDB中的概念与意义. 术语\概念 ...

  4. 获取点击元素的id

    1.onclick="dianji(this.id)" 传入id到方法里function dianji(id){ //这个就是id}2. $(document).click(fun ...

  5. Same Origin Policy 浏览器同源策略详解

    同源策略 Same Origin Policy 日常开发中最常与网络打交道,那关于浏览器的同源策略和跨域相关的知识是该整理一下了. 首先需要明确的是,同源策略是浏览器的安全策略,由于存在这个策略,我们 ...

  6. Django之csrf中间件及auth模块使用

    目录 一.基于配置文件的编程思想 1. importlib 模块 2. 配置文件 二.跨站请求伪造(csrf) 1.csrf简介以及由来 2.Django中的csrf中间件如何使用 2.1 普通for ...

  7. POJ-3436(网络流+最大流+输出路径)

    ACM Computer Factory POJ-3436 题目就是一个工厂n个加工机器,每个机器有一个效率w,q个材料入口,q个材料出口,每个口有三个数表示状态,1表示一定有入/出的材料,0表示没有 ...

  8. 小程序setData中key用变量

    Page({ data:{ //类型列表 lastRootList:0,//上次点击的类型 rootList:[{name:'服饰箱包',selectClass:'root-active',iconC ...

  9. JavaWeb随笔整理

    JavaWeb随笔整理 为方便阅读,故整理了相关学习笔记 前端相关 HTML CSS JavaScript BootStrap 数据库相关 MySQL基础 MySQL表的约束和数据库设计 MySQL多 ...

  10. golang——net/rpc/jsonrpc包学习

    1.jsonrpc包 该实现了JSON-RPC的ClientCodec和ServerCodec接口,可用于rpc包. 可用于跨语言使用go rpc服务. 2.常用方法 (1)func Dial(net ...