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

最新推荐文章于 2024-06-25 18:31:00 发布

imp_lc

最新推荐文章于 2024-06-25 18:31:00 发布

阅读量1.8k

点赞数

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

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

版权

前面学习了如何用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&

最低0.47元/天解锁文章

imp_lc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[CSS3学习]用CSS3做一个圆圈等待条动画效果

前面学习了如何用CSS3绘制一个自定义的扇形，现在想利用那个扇形加上动画方法来实现一种圆圈等待条动画效果，算是该方法的一种应用吧。目标：用CSS3实现一种圆圈等待条动画效果想法：和之前描绘扇形不同，这次绘制牵扯到大于半圆的扇形，可以同样的方法绘制两个半圆进行组合实现；
复制链接

扫一扫