[CSS3学习]用CSS3做一个圆圈等待条动画效果

最新推荐文章于 2021-08-04 10:30:17 发布

imp_lc

最新推荐文章于 2021-08-04 10:30:17 发布

阅读量1.8k

点赞数

分类专栏： CSS3 文章标签： css3 等待条动画

本文链接：https://blog.csdn.net/u011832520/article/details/17075207

版权

本文介绍如何利用CSS3结合扇形绘制和动画技术，创建一个圆圈等待条动画效果。通过组合两个半圆并分别设置动画，实现无缝切换，从而达到预期的视觉效果。

摘要由CSDN通过智能技术生成

前面学习了如何用CSS3绘制一个自定义的扇形，现在想利用那个扇形加上动画方法来实现一种圆圈等待条动画效果，算是该方法的一种应用吧。

目标：用CSS3实现一种圆圈等待条动画效果

想法：

和之前描绘扇形不同，这次绘制牵扯到大于半圆的扇形，可以同样的方法绘制两个半圆进行组合实现；
分别给两个半圆添加animation动画；
对两个半圆的动画进行调整，使其无缝切换。

代码：

首先先实现绘制大于半圆的扇形

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>大扇形</title>
	</head>
	<body>
		<div class="father" id="leftFahter">
			<div class="child" id="leftChild"></div>
		</div>
		<div class="father" id&