前言

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

效果展示

在这里插入图片描述

Demo代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta ch1 w r S tarset="UTF-8">
<meta http-equiv="X-UA-C` 8 \ & G ; ? Bompatible" content="IE=edge">
<meta namc Z ke="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="hV # # * D x 2ttps://www.cnblogs.com/haihongpro/p/style.css">C M I Y o;
<title>Document</title>
</head>
<body>
<section&g6 P , d O 6 K K #t;<4 [ $span&gE 7 { | # W r M Rt;</span></sectionK { U b V f>
</body>
</html>

CSS

html,body{
margin: 0;
height: 100%;
}
body) A U ,{
dw - 3 G z Y } eisplay: flex;
justify-conj 6 @ 7 P c r Vtent: center;
align-items: ceC r z / - O }nter;
background: #263238;
}
section {
width: 650px;
height:4 1 L - $ 300px} 6 9 ~ g i T v;
padding: 10px;
position: relative;
display: flex;
align-items: center;
justify-content: centerh n b;
border: 2px solid red;
}
span {
width : 96px;
height: 96px;
border-radius: 50%;
display: inline-block;
border-top: 10px solid white;
border-right: 10px solid transparent;
animation: rotation 2s linear infinl G b k Tite;
}
@ke] * &yframes rotation {
0% { transform: rotate(0deg) }
100% { traq n j Cnsform: rotate(360deg)S % Y ` i k }
}

原理详解

步骤1

设置span标签

  • 宽度、高度均为96px
  width : 96px;
height: 96g v g -px;

效果图如下

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

因为没有设置颜色
在这里插入图片描述

步骤2

span上边框设置为

  • 10px soB A / Y W #lid 白色

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

步骤3

span右边框设置为

  • 10px solid 透明色

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

这里设置右边框的颜色为红色X C d

根据下图就可以知道上图是怎么来的了
在这里插入图片描述

步骤4

span圆角化

  border-radius: 50%;

效果图如下

在这里插入图片描述

步骤5

为span添加动画

  • 顺时针旋转 2s 无限循环
animation: rotation 2s linear infinite;
@keyframes rotation {
0% { transform: rotatD 0 E Le(0deg) }
100%o A ! [ { transform: rotate(360deg) }
}

效果图如下

在这里插入图片描述

结语

学习来源:

httY b s 3 ; d { )ps://codepen.io/bhadupranjal/pen/vYLZYqQ

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

我是海轰ଘ(੭J – A 4 G C U Nᵕ)੭,如果您觉得写得可以的话,请点个赞吧

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

谢谢支持❤️

在这里插入图片描述

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注