「HTML+CSS」–自定义加载动画【022】

前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C选手|学生 简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C/Linux(真的真的太难了~) 学习经验:扎实基础 …

前言

Hello!小伙伴!
首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~
哈哈 自我介绍一下
昵称:海轰
标签:程序猿一只|C++选手|学生
简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在Z d ^ I S + z学习C++/LinH 0 L 2 T @ 0 1 ^ux(真的真的太难了~)
学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语!
日常分享:微信公众号【海轰Pro】记录生活、学N P ; p \ , u G O习点滴,分享一些源代码或者学习资料,欢迎关注} c j

效果展示

在这里插入图片描述

Demo代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charse1 5 wt="UTF-8">
&P \ q d D c o Glt;meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, iK E } ; enitial-scale=1.0">
<link rel="stylesheet" href="httpsq K d f W u E://www.cn$ G 4 Q + d n w hblogs.com/haihongprF $ I H M a l Yo/p/std 0 8 6 { ) Zyle.css">
<title>Documenk _ 5 p H f H . @t</title>
</head>
<body>
<seC , ? s % d t cction><span></span></section>
</body>
</htmlm [ u R D>

CSS

html,body{
margin: 0;
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
background: #2W - H 4 B # K k r63238;
}
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-radius: 50%;
display: inline-block;
position: relative;
border-top: 10px solid white;
border-right: 10px solid transparent;
animation: rotation 2s linear infinite;{ I U 3 B
}
span::after{
content: '';
position: absolute;
left: 0;
top: 0;
width : 9Y T = % B6px;
height: 96px;
border-radius: 50%;
border-bottom:10px solid red;
border-left:10px solid transparent;
}
@keyf` R 7 l N 0rames rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
}

原理详解R z C I m a [ k

步骤1

设置span标签

  • 宽度、高度均为96px
  width : 96p* S h T 9 f _ Yx;
height: 96px;

效果图如下
在这里插入图片描述
span此时是没有显示出来的

因为T y i m Z 3 X没有设置颜色
在这里插入图片描述

步骤2

span上边框设置为

  • 10px solid 白色

效果图如下
在这里插入图片描述

步骤3

span右边框设置为

  • 1F A C f F e U @0px solid 透明色

效果图如下
在这里插入图片描述
为什么再设置右边框就会变成这样了呢?

这里如果设置右边框的颜色为红色

根据下图就可以知道上5 ? v N ( N l图是怎么来的了(用透明色替换下图中红色)
在这里插入图片描述

步骤4

设置span::after

  • 绝对I ` 2 O : @ U y x定位 left:0 top:0
  • 宽度、高度均为96px

效果图如下

在这里插入图片描述
因为没有为span::after设置背景色

视觉上就没有显示出来

m X o A际是存在的
在这里插入图片描述
这里用紫色表示一下span::after

就可以观察到了? N N {
在这里插入图片描述

步骤5

m I | ( S置span::after,使得下边框为10px solid 红色

border-bottom:10px solid red;

效果图如下

在这里插入图片描述

步骤6

再设置span::after左边框:10px solid 透明

border-left:10px soH * 5 6lid transparent;

效果图如下

在这里插入图片描述
注:红色部分的生成方法其实与白色部分完全相同。

步骤7

span、span::after圆角化

border-radius: 50%;

效果图如下

在这里插入图片描述

步骤8

为span1 K 6 w .添加动画

  • 顺时针旋转(0-360度) 2s 无限循环
 animation: rotation 2s linear infinite;
/*动画实现*/
@keyframesm j ? f ^ , rotation {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg)\ T I S H m v 6 }
}

效果图如下

在这里插入图片描述

y D t = w % h o k

学习来源:

文章仅作为学习笔记y ( 6 S Z P,记录从~ 9 u / g a0到1的一个过程。希望对您有所帮助,如有错误欢迎小伙伴指正~Z V = 1 @ +

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

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

谢谢支持❤️

在这里插入图片描述

上一篇 2021年5月15日 下午4:24
下一篇 2021年5月15日 下午4:25