「HTML+CSS」--自定义加载动画【014】【疑问未解决】
前言
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 的情况？？？
备注：问题暂未解决，还是没有想明白～
结语
学习来源：
文章仅作为学习笔记，记录从0到1的一个过程。希望对您有所帮助，如有错误欢迎小伙伴指正～
我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧
写作不易，「点赞」+「收藏」+「转发」
谢谢支持️
「HTML+CSS」--自定义加载动画【014】【疑问未解决】的更多相关文章
- 「HTML+CSS」--自定义加载动画【008】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- 「HTML+CSS」--自定义加载动画【007】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- 「HTML+CSS」--自定义加载动画【009】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- 「HTML+CSS」--自定义加载动画【010】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- 「HTML+CSS」--自定义加载动画【011】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- 「HTML+CSS」--自定义加载动画【015】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- 「HTML+CSS」--自定义加载动画【016】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- 「HTML+CSS」--自定义加载动画【017】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- 「HTML+CSS」--自定义加载动画【026】
效果展示 Demo代码 HTML <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
随机推荐
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- SPC空投搅动市场，NGK算力持有者或成大赢家！
要说公链3.0的顶级代表是谁,恐怕非NGK公链莫属.NGK公链自诞生以来,便在区块链市场掀起了一波又一波热潮,并不断地打造着属于自己独有的生态体系.从NGK公链到Baccarat,再到呼叫河马,几乎每 ...
- PAA房产智慧社区：解决社区管理服务的痛点难点
社区,是社交与生活的舞台,更是家的延伸.社区之所有能够有所创新发展,得益于借助数字化和智能化.智能化给社区带来的便利体现在社区门禁可以人脸识别:AI的摄像头可以自动捕获异常的现象,便于社区管理员第一时 ...
- 图片居中的flex实现
文本居中 text-align:center; 如果是图片放在div中,就没办法了.用flex可以很简单实现. display: flex; justify-content: center; /* 图 ...
- 微信小程序：报错fail webview count limit exceed
报错: 分析原因: 先从列表页面跳转到详细页面时,使用了Navigator标签,open-type默认使用的navigate,跳转时会保留当前页, <navigator class=" ...
- JAVA学生宿舍管理系统
转: JAVA学生宿舍管理系统 需要的工具 1.SQL Server 2.Eclipse 3.JDBC连接数据库驱动 https://download.microsoft.com/download/A ...
- 在不使用外延层的同轴半绝缘衬底材料上制作4H-SIC横向双重注入金属氧化物半导体场效应晶体管
在不使用外延层的同轴半绝缘衬底材料上制作4H-SIC横向双重注入金属氧化物半导体场效应晶体管 杂志:日本应用物理杂志 在不使用外延层在同轴的半绝缘SIC衬底上制作4H-SIC横向双重注入金属氧化物 ...
- 还在用crontab? 分布式定时任务了解一下
前言 日常任务开放中,我们会有很多异步.批量.定时.延迟任务要处理,go-zero中有 go-queue,推荐使用 go-queue 去处理,go-queue 本身也是基于 go-zero 开发的,其 ...
- InterJ idea 回滚提交的代码
如果你要回滚到这一次提交 ctrl shift k 提交 选force push 那么你的代码就回滚到你所想要的这次提交记录了
- 爬虫必知必会（4）_异步协程-selenium_模拟登陆
一.单线程+多任务异步协程(推荐) 协程:对象.可以把协程当做是一个特殊的函数.如果一个函数的定义被async关键字所修饰.该特殊的函数被调用后函数内部的程序语句不会被立即执行,而是会返回一个协程对象 ...