「HTML+CSS」--自定义加载动画【015】
前言
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 transparent;
border-radius: 50%;
position: relative;
animation: rotation 2s linear infinite;
}
span::before{
position: absolute;
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 56px;
height: 56px;
border: 10px solid;
border-color: transparent transparent red red;
border-radius: 50%;
/* 注意这里的时间 */
animation: rotationback 1s linear infinite;
}
span::after{
position: absolute;
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 24px;
height: 24px;
border: 10px solid;
border-radius: 50%;
border-color: white white transparent transparent;
/* 注意这里的时间 */
animation: rotation 3s 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 ;
效果图如下
步骤2
上/右边框颜色设置为白色，下/左边框颜色为透明
border-color: white white transparent transparent;
效果图如下
步骤3
设置span::before伪类
- 绝对定位
- 宽度、高度均为56px
- 边框：10px solid
- 位于span正中央（上下左右居中）
position: absolute;
content: '';
/* 上下左右居中 绝对定位时*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 56px;
height: 56px;
border: 10px solid;
效果图如下
步骤4
span::before设置边框颜色
- 下/左边框颜色为红色
- 上/右边框颜色为透明
border-color: transparent transparent red red;
效果图如下
步骤5
设置span::after元素
- 宽度、高度均为24px
- 边框：10px solid
- 绝对定位
- 位于span正中央（上下左右居中）
position: absolute;
content: '';
/*上下左右居中*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 24px;
height: 24px;
border: 10px solid;
效果图如下
步骤6
设置span::after的边框颜色
- 上/右边框颜色为白色
- 下/左边框颜色为透明
border-color: white white transparent transparent;
效果图如下
步骤7
对span、span::before、span::after圆角化
border-radius: 50%;
效果图如下
步骤8
为span添加动画
- 顺时针 2s 无限循环
animation: rotation 2s linear infinite;
@keyframes rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)
}
}
效果图如下
步骤9
为span::before添加动画
- 逆时针 1s 无限循环
animation: rotationback 1s linear infinite;
@keyframes rotationback {
0% { transform: rotate(360deg) }
100% { transform: rotate(0deg)
}
}
效果图如下
步骤10
为span::after添加动画
- 顺时针 3s 无限循环
animation: rotation 3s linear infinite;
@keyframes rotationback {
0% { transform: rotate(360deg) }
100% { transform: rotate(0deg)
}
}
效果图如下
结语
学习来源：
文章仅作为学习笔记，记录从0到1的一个过程。希望对您有所帮助，如有错误欢迎小伙伴指正～
我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧
写作不易，「点赞」+「收藏」+「转发」
谢谢支持️
「HTML+CSS」--自定义加载动画【015】的更多相关文章
- 「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」--自定义加载动画【014】【疑问未解决】
前言 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 ...
随机推荐
- ES6 声明变量的六种方法
ES5 只有两种声明变量的方法: var 命令和 function 命令. ES6 除了添加 let 和 const 命令, 后面章节还会提到, 另外两种声明变量的方法: import 命令和 cla ...
- JVM线上故障初步简易排查
线上故障主要包括cpu 磁盘 内存 网络等问题 依次排查 1.cpu 1) 先用ps找到进程pid 2) top -H -p pid 找到cpu占用高的线程 3)printf '%x\n' pid 获 ...
- 基于docker快速搭建hbase集群
一.概述 HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文"Bigtable:一个结构化数据的分布式存储系统".就像Bigt ...
- 解决vue 绑定事件会覆盖默认参数的问题
解决vue 绑定事件会覆盖默认参数的问题 在使用一些ui框架的时候,某些组件的框架中的事件所规定的参数不能满足实际开发的需要,但是直接传入参数会把默认的参数覆盖掉 解决方法:将参数放入箭头函数中,传递 ...
- golang——net/rpc包学习
1.rpc包 rpc包提供了通过网络或其他I/O连接对一个对象的导出方法的访问. 只有满足如下标准的方法才能用于远程访问,其余方法会被忽略: (1)方法是导出的(2)方法有两个参数,都是导出类型或内建 ...
- Java Swing 自定义Dialog确认对话框
Java Swing 自定义Dialog 需求:当点击JFrame窗口的关闭按钮时,弹框询问是否确定关闭窗口,如果是则关闭程序,否就让弹框消失什么也不做(使用Dialog). 分析:虽然Java提供了 ...
- LNMP配置——PHP安装
一.下载 #cd /usr/local/src //软件包都放在这里方便管理 #wget http://cn2.php.net/distributions/php-5.6.30.tar.gz 二.解压 ...
- 三分钟教你提升应用推送的ROI
推送是App应用性价比最高也是最直接的营销运营手段,其细节颇多,非常考验运营人员的功力,本文将从ROI角度来分析怎么提升营销类推送的收益.(非IM类.系统类等功能服务型推送) 以一个日活100万的应用 ...
- Java标识符,关键字,保留字三者区分(主要是从官网摘抄)
区分 标识符(Identifiers) An identifier is an unlimited-length sequence of Java letters and Java digits, t ...
- 建立高速缓存机制-java版
前言 一台计算机的核心是CPU,它是计算机系统的运算和控制核心.由于它处理运算速度快,所以基本都会给CPU配置一级缓存,当CPU要读取一个数据时,首先从缓存中查询,如果没有在从内存或者磁盘块中找. ...