前言

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)
}

效果图如下

结语

学习来源:

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

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

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

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

谢谢支持️

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

  1. [前端随笔][CSS] 制作一个加载动画 即帖即用

    说在前面 描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则 用 ...

  2. ios 自定义加载动画效果

    在开发过程中,可能会遇到各种不同的场景需要等待加载成功后才能显示数据.以下是自定义的一个动画加载view效果.      在UIViewController的中加载等到效果,如下 - (void)vi ...

  3. 原生JS+ CSS3创建loading加载动画;

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  4. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  5. CSS 实现加载动画之八-圆点旋转

    这篇文件介绍的动画是QQ邮箱APP里的加载动画,效果类似,但是不完全一样.实现过程不复杂,这里不详细解释了,直接上源码.另外还有一种实现方式,利用元素的3D转换加平移. 1. 先看截图 2. 源代码 ...

  6. CSS 实现加载动画之七-彩环旋转

    今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...

  7. CSS 实现加载动画之六-大风车

    这个动画改编自光盘旋转,前几个步骤一样,最后一步不同.光盘旋转的最后一步是外层容器加个圆形的白色边框,多余部分隐藏,这个案例则是在每个旋转的子元素的顶部或底部增加一个三角形的元素,构成风车旋转的角. ...

  8. CSS 实现加载动画之五-光盘旋转

    今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...

  9. CSS 实现加载动画之四-圆点旋转

    圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以实现.这个实现也比较简单. 1. 动画截图 ...

  10. CSS 实现加载动画之三-钢琴按键

    今天做的这个动画实现也是非常简单,简单数几行代码就可以搞定.给这个动画取了个优雅的名字--钢琴按键,也实在是想不出什么更形象的名字了.废话不多说,直接上图. 1. 先看gif图 2. 代码实现思路 2 ...

随机推荐

  1. Objective-C 观察者模式--简单介绍和使用

    观察者模式(有时又被称为发布-订阅模式) 在此种模式中,一个目标物件管理所有相依于它的观察者物件,并且在它本身的状态改变时主动发出通知. 这通常透过呼叫各观察者所提供的方法来实现.此种模式通常被用来实 ...

  2. jquery ajax post 中文乱码解决

    jquery ajax post 方式默认传递的是UFT-8字符,即使页面设置了gbk编码也无效.字符传到后台时如果后台设置的gbk或者其他编码,就会出现乱码.解决很容易,将后台页面设置成UTF-8编 ...

  3. POJ 2983 Is the Information Reliable? 信息可靠吗 (差分约束,spfa)

    题意:有n个站排成一列,针对每个站的位置与距离关系,现有多个约束条件,约束条件分两种:(1)确定的.明确说明站a距离站b多少个单位距离.(2)不确定的.只知道a在b的左边至少1个单位距离.  根据已知 ...

  4. hibernate的第一个程序

    #建表语句 create database hibernate; use hibernate; create table user( id int primary key, name varchar( ...

  5. 面向对象的方式进行数据交换网络之间的差异--无缝切换的发展到单机游戏C/S模式

    上一页本文描述描述有关数据的发展过程之间的差异支撑点,这里展示的另一个特点:无缝切换的发展,以独立C/S模式 一般C/S模式都面临一个问题: 就是开发过程中的调试难题,由于涉及到client和服务端相 ...

  6. DirectX:函数连接两个随机filter

    函数连接两个随机filter HRESULT ConnectFilters( IBaseFilter *pSrc, IBaseFilter *pDest ) { IPin *pIn = 0; IPin ...

  7. 从锅炉工到AI专家(5)

    图像识别基本原理 从上一篇开始,我们终于进入到了TensorFlow机器学习的世界.采用第一个分类算法进行手写数字识别得到了一个91%左右的识别率结果,进展可喜,但成绩尚不能令人满意. 结果不满意的原 ...

  8. 【图数据结构的遍历】java实现广度优先和深度优先遍历

    [图数据结构的遍历]java实现广度优先和深度优先遍历 宽度优先搜索(BFS)遍历图需要使用队列queue数据结构: 深度优先搜索(DFS, Depth First Search)的实现 需要使用到栈 ...

  9. /dev/null和/dev/zero的区别

    /dev/null,外号叫无底洞,你可以向它输出任何数据,它通吃,并且不会撑着!/dev/zero,是一个输入设备,你可你用它来初始化文件. /dev/null------它是空设备,也称为位桶(bi ...

  10. Linux 期中架构 Ansible

    ansible  自动化软件   基于Python开发 特点概述: 配置文件不需要过多配置  了解就可以了 ###部署ansble软件 ##受控主机部署 backup   nfs01   web01 ...