css实现转圈加载动画效果

css实现转圈加载动画，直接上代码

Html代码：

<svg class="circular" viewbox="25 25 50 50">
	<circle class="path" cx="50" cy="50" r="20" fill="none" />
</svg>

Css代码：

.circular {
	width: 100px;
	height: 100px;
	animation: rotate 2s linear infinite;
}

.path {
	stroke-dasharray: 1, 200;
	stroke-dashoffset: 0;
	stroke: #000;
	animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -35px;
	}

	100% {
		stroke-dasharray: 89, 200;
		stroke-dashoffset: -124px;
	}
}

效果如下：

鸟学习记：第四十天

前言

?

Hello！小伙伴！

非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～

自我介绍 ?(?ˊ?ˋ)?

昵称：海轰

标签：程序猿｜C++选手｜学生

简介：因C语言结识编程，随后转入计算机专业，有幸拿过一些国奖、省奖...已保研。目前正在学习C++/Linux/Python

学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！

效果展示

在这里插入图片描述

Demo代码

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-radius: 50%;
  display: inline-block;
  position: relative;
  border: 10px red;
  border-style: dashed solid  solid dotted;
  border-bottom-color: transparent;
  animation: rotation 2s linear infinite ;
}
span::after{
  content: '';
  position: absolute;
  left: 51px;
  top: 79px;
  border: 20px solid transparent;
  border-right-color: red;
  transform: rotate(-45deg);
}
@keyframes rotation {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg)
  }
}

原理详解

步骤1

使用span标签作为箭尾，设置为

宽度、高度均为96px
上边框：10px 红色 dashed（虚线）
下边框：10px 透明 solid（实线）
左边框：10px 红色 dotted（点状）
右边框：10px 红色 solid（实线）

 width : 96px;
  height: 96px;
  border: 10px red;
  border-style: dashed solid  solid dotted;
  border-bottom-color: transparent;

效果图如下

在这里插入图片描述

步骤2

span标签圆角化

border-radius: 50%;

效果图如下

在这里插入图片描述

步骤3

使用span::after伪类元素作为箭头

设置为

绝对定位
边框：20px solid，右边框为红色，上/下/左边框为透明
旋转-45度

  position: absolute;
  border: 20px solid transparent;
  border-right-color: red;
  transform: rotate(-45deg);

效果图如下

步骤4

设置span::after的位置

注：

这里移动位置时候就需要一点点移动了
确保箭头和箭尾可以很好的重合
这里肯定是可以用数学公式计算出来的，这里稍微需要点时间，之后有空再更新更为一般情况时需要移动的距离公式吧

/*这里箭头需要移动的距离*/
  left: 51px;
  top: 79px;

效果图如下

步骤5

为span添加动画

顺时针旋转（0-360度） 2s 无限循环

 animation: rotation  2s linear infinite ;

/*动画实现*/
@keyframes rotation {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg)
  }
}

效果图如下

在这里插入图片描述

结语

文章仅作为学习笔记，记录从0到1的一个过程。

希望对您有所帮助，如有错误欢迎小伙伴指正～

“从输入URL到页面加载完成的过程”比喻成一次餐厅用餐体验，可以这样解释：

1.输入URL：这就像是你决定去某家餐厅吃饭，并告诉出租车司机（浏览器）餐厅的地址。这个地址（URL）是找到餐厅（网站服务器）的关键。

2. 域名解析：出租车司机需要知道这个地址在哪里。他会查看地图（域名系统，DNS），将餐厅的名字（域名）转换成具体的地理位置（IP地址）。

3. 建立连接：找到餐厅后，你需要进入餐厅并坐下（建立与服务器的连接）。如果餐厅很受欢迎，可能需要排队等位（数据传输中的延迟）。

4. 发送请求：坐下后，你向服务员（服务器）点菜（发送网页请求）。你可能会要求特定的菜单（网站的特定页面）。

5. 处理请求：服务员回到厨房，告诉厨师你的订单（服务器处理你的请求）。厨师开始准备你点的菜（生成网页内容）。

6. 接收响应：菜做好后，服务员将其送到你的桌上（服务器将数据发送回浏览器）。这就像是网页的内容被加载到你的电脑上。

7. 渲染页面：你看到桌上的菜肴并开始用餐（浏览器解析并显示网页内容）。这就像是你的浏览器将接收到的数据转换成你可以看到和互动的网页。

8. 加载完成：当所有的菜都被送到你的桌上，你可以享受完整的用餐体验（页面完全加载完毕，可以进行交互）。

就像在餐厅用餐，整个过程涉及多个步骤和不同的参与者，每个环节都至关重要，以确保你最终能享受到你想要的美食（网页）。

在线咨询

上一篇：Django之Form组件详解、图片上传及定制
下一篇：旋转、缩放、移动：掌握CSS Transform动画

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

css实现转圈加载动画效果

鸟学习记：第四十天

前言

效果展示

Demo代码

原理详解

步骤1

步骤2

步骤3

步骤4

步骤5

结语

您的项目需求