「HTML+CSS」--自定义加载动画【011】
前言
Hello!小伙伴!
首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
哈哈 自我介绍一下
昵称:海轰
标签:程序猿一只|C++选手|学生
简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C++/Linux(真的真的太难了~)
学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!
日常分享:微信公众号【海轰Pro】记录生活、学习点滴,分享一些源代码或者学习资料,欢迎关注~
效果展示
思路
这里用span元素代表外层白色圆圈
两个红色小球分别用span的两个伪类::before和::after代表
根据效果图,可以大概得出思路
- 先利用span生成一个正方形,设置好边框
- 两个伪类元素为绝对定位,分别位于正方形的左上和右下
- 然后分别对其进行圆角处理
- 最后添加旋转动画即可
Demo代码
HTML
<!DOCTYPE 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-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
animation: rotation 2s linear infinite;
}
span::before{
position: absolute;
content: '';
top: 15px;
left: 15px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
span::after{
position: absolute;
content: '';
bottom: 15px;
right: 15px;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
}
@keyframes rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)
}
}
原理详解
步骤1
将span元素设置为
- 一个96️96px的正方形
- 边框为10px,白色,solid
width : 96px;
height: 96px;
border: 10px solid #fff;
效果图如下
步骤2
span::before和span::after设置
- 宽度、高度均为20px
- 绝对定位,其中before位于左上,after位于右下
- 背景色为红色
/* before的设置*/
position: absolute;
content: '';
top: 0;
left: 0;
width: 20px;
height: 20px;
background: red;
/*after的设置*/
position: absolute;
content: '';
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background: red;
效果图如下
步骤3
向正方形中心反向移动::before和::after
/* before的设置*/
top: -15px;
left: -15px;
/*after的设置*/
bottom: -15px;
right: -15px;
效果图如下
步骤4
对span、span::before、span::after设置圆角
border-radius: 50%;
效果图如下
步骤7
为span添加动画
animation: rotation 1s linear infinite;
/*动画实现*/
@keyframes rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)
}
效果图如下
结语
学习来源:
文章仅作为学习笔记,记录从0到1的一个过程。希望对您有所帮助,如有错误欢迎小伙伴指正~
我是海轰ଘ(੭ˊᵕˋ)੭,如果您觉得写得可以的话,请点个赞吧
写作不易,「点赞」+「收藏」+「转发」
谢谢支持️
「HTML+CSS」--自定义加载动画【011】的更多相关文章
- 「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」--自定义加载动画【014】【疑问未解决】
前言 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 ...
随机推荐
- Excel和CSV格式文件的不同之处
来源:https://blog.csdn.net/weixin_39198406/article/details/78705016 1.个人理解:为何选择使用csv来存储接口测试用例相关字段数据,而不 ...
- react虚拟dom
- Docker中配置MySQL并实现远程访问
Docker配置MySQL容器 拉取MySQL镜像 docker pull mysql:5.6 有可能会因为网络问题失败,重复尝试. 创建容器 docker run -d --name selfdef ...
- SpringCloud(四):服务注册中心Eureka Eureka高可用集群搭建 Eureka自我保护机制
第四章:服务注册中心 Eureka 4-1. Eureka 注册中心高可用集群概述在微服务架构的这种分布式系统中,我们要充分考虑各个微服务组件的高可用性 问题,不能有单点故障,由于注册中心 eurek ...
- 后端程序员之路 16、信息熵 、决策树、ID3
信息论的熵 - guisu,程序人生. 逆水行舟,不进则退. - 博客频道 - CSDN.NEThttp://blog.csdn.net/hguisu/article/details/27305435 ...
- C++入门(3):C++开发环境搭建
本文首发 | 公众号:lunvey 既然开始学C++,电脑上应该具备它的开发环境. 而C++历史,lunvey老师觉得:初学者有兴趣可以自行了解一下,不是必要的. 大家都在用最新款的苹果手机,好用就行 ...
- LeetCode-重建二叉树(前序遍历+中序遍历)
重建二叉树 LeetCode-105 首次需要知道前序遍历和中序遍历的性质. 解题思路如下:首先使用前序比遍历找到根节点,然后使用中序遍历找到左右子树的范围,再分别对左右子树实施递归重建. 本题的难点 ...
- 记一次Linux内核崩溃:kdump,crash,vmcore
原理 Linux内核发送崩溃时,kdump会生成一个内核转储文件vmcore. 可以通过分析vmcore分析出内核崩溃的原因. crash是一个被广泛应用的内核奔溃转储文件分析工具.使用crash调试 ...
- CSV 注入实战
oxo1 前言 之前看到过 CSV 注入的文章,具体想了解的请搜索学习,这里不多作介绍.今天刚好碰到了导出功能,就随手测试一波,没想到还真的存在 CSV 注入漏洞. oxo2 经过 1.测试漏洞 看到 ...
- cpu缓存和volatile
目录 CPU缓存的由来 CPU缓存的概念 CPU缓存的意义 缓存一致性协议-MESI协议 Store Buffers Store Forwarding Memory Barriers Invalida ...