关闭

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

标签: css3等待条动画
896人阅读 评论(0) 收藏 举报
分类:

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

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

想法:

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

代码:

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

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="rightFather">
			<div class="child" id="rightChild"></div>
		</div>
	</body>
</html>

CSS:

.father {
	position:absolute;
	width:100px;
	height:100px;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-border-radius:50%;
	border-radius:50%;
}
.child {
	position:absolute;
	width:100px;
	height:100px;
	background:red;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-border-radius:50%;
	-ms-border-radius:50%;
	border-radius:50%;
}
#leftFahter{
	clip: rect(0px 50px 100px 0px);
}
#rightFather{
	clip:rect(0px 100px 100px 50px);
}
#leftChild {
	clip: rect(0px 100px 100px 50px);
	transform:rotate(180deg);
}
#rightChild {
	clip:rect(0px 50px 100px 0px);
	-moz-transform:rotate(60deg);
	-webkit-transform:rotate(60deg);
	-o-transform:rotate(60deg);
	-ms-transform:rotate(60deg);
	transform:rotate(60deg);
}

其效果如下:

然后我们再给其加上动画,让其左右配合旋转,最后达到等待条的效果,此外,也可以通过border来实现圆环效果,代码如下:

.father {
	position:absolute;
	width:100px;
	height:100px;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-border-radius:50%;
	border-radius:50%;
}
.child {
	position:absolute;
	width:60px;
	height:60px;
	border:20px red solid;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-border-radius:50%;
	-ms-border-radius:50%;
	border-radius:50%;
	-moz-animation:move 2s linear infinite;
	-webkit-animation:move 2s linear infinite;
	-o-animation:move 2s linear infinite;
	-ms-animation:move 2s linear infinite;
	animation:move 2s linear infinite;
}
#leftFahter{
	clip: rect(0px, 50px, 100px, 0px);
}
#rightFather{
	clip:rect(0px, 100px, 100px, 50px);
}
#leftChild {
	-moz-animation-delay:0.5s;
	-webkit-animation-delay:0.5s;
	-o-animation-delay:0.5s;
	-ms-animation-delay:0.5s;
	animation-delay:0.5s;
	clip: rect(0px, 100px, 100px, 50px);
}
#rightChild {
	clip:rect(0px, 50px, 100px, 0px);
}

@keyframes move{
	0% {transform:rotate(0deg);}
	25% {transform:rotate(180deg);}
	50% {transform:rotate(180deg);}
	75% {transform:rotate(360deg);}
	100% {transform:rotate(360deg);}
}

@-moz-keyframes move{
	0% {transform:rotate(0deg);}
	25% {transform:rotate(180deg);}
	50% {transform:rotate(180deg);}
	75% {transform:rotate(360deg);}
	100% {transform:rotate(360deg);}
}

@-webkit-keyframes move{
	0% {transform:rotate(0deg);}
	25% {transform:rotate(180deg);}
	50% {transform:rotate(180deg);}
	75% {transform:rotate(360deg);}
	100% {transform\:rotate(360deg);}
}

@-o-keyframes move{
	0% {transform:rotate(0deg);}
	25% {transform:rotate(180deg);}
	50% {transform:rotate(180deg);}
	75% {transform:rotate(360deg);}
	100% {transform:rotate(360deg);}
}

@-ms-keyframes move{
	0% {transform:rotate(0deg);}
	25% {transform:rotate(180deg);}
	50% {transform:rotate(180deg);}
	75% {transform:rotate(360deg);}
	100% {transform:rotate(360deg);}
}
最终效果如下:传送门


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8106次
    • 积分:179
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论