前言

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. Android中Activity处理返回结果的实现方式

    大家在网上购物时都有这样一个体验,在确认订单选择收货人以及地址时,会跳转页面到我们存入网站内的所有收货信息(包含收货地址,收货人)的界面供我们选择,一旦我们点击其中某一条信息,则会自动跳转到订单提交界 ...

  2. Directive间的通信

    Directive间的通信 源自大漠的<AngularJS>5个实例详解Directive(指令)机制 这个例子主要的难点在于如何在子Expander里面访问外层Accordion的sco ...

  3. 在Asp.net MVC使用jqGrid--代码少点再少点

    本示例显示了如何动态生成前端jqGrid代码,一般情况仅一行代码: <%=Html.jqGrid<TestModel>(@"#jqT", "Test&q ...

  4. 如何让Table中的第一列和第二列的值相乘然后赋值给第三列

    因为需求的原因所以这样做,不废话了,直接上代码,我用的GridView绑定的数据,table也一样,因为GridView通过浏览器编译后的代码就是table.下面是aspx页面的Html代码: < ...

  5. 慕课网-安卓工程师初养成-3-8 Java中的条件运算符

    来源:http://www.imooc.com/code/1306 条件运算符( ? : )也称为 “三元运算符”. 语法形式:布尔表达式 ? 表达式1 :表达式2 运算过程:如果布尔表达式的值为 t ...

  6. Laravel Controllers

    Basic Controllers Instead of defining all of your route-level logic in a single routes.php file, you ...

  7. BZOJ 1001 狼捉兔子

    Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的,而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个 ...

  8. xdu_RainAndBow 鞍山打铁记

    我们作为弱校xdu的七队(大四一支,大三四支,大二俩),本来都没指望今年可以出去,结果运气不错,学校得到几个激动名额, 于是我们激动地成功申请到了鞍山站的名额,嗯...可以出去旅游了. 不过我们毕竟太 ...

  9. 吸血鬼数字算法参考 -- javascript版本

    // 吸血鬼数字 java编程思想 第四章 75页 练习10 for (var i = 10; i <= 99; i++) { for (var j = i + 1; j < 99; j+ ...

  10. 数据切分——Mysql分区表的建立及性能分析

    Mysql的安装方法可以参考: http://blog.csdn.net/jhq0113/article/details/43812895 Mysql分区表的介绍可以参考: http://blog.c ...