关闭

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

标签: css3等待条动画
1084人阅读 评论(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网站的观点或立场

CSS实现的loading页面等待效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无标题文档</title> <styl...
  • babybk
  • babybk
  • 2016-06-24 19:06
  • 2969

漂亮的加载等待动画,用纯CSS3制作

下面展示的是一批完全只用CSS制作的加载等待动画效果。每个动画只运用了简单的css属性,没有任何繁重的渲染动作和布局计算,都是非常轻量级的代码。 作者将这些CSS动画代码收集到了loaders.css,你可以轻松的将这个css文件嵌入到你的页面中,然后在需要放置loading图标的地方加入下面的代...
  • DiyHzp
  • DiyHzp
  • 2016-08-26 14:43
  • 873

使用Animation-list实现等待旋转圆圈动画

我们在做网络交互或是从服务器提取数据的时候,常常会给出一个等待的动画,就是一个小圆圈转啊转的。它的使用很简单,我们只要使用Animation-list用三,五行代码,就可以搞定了。          首先,我们要找...
  • zchlww
  • zchlww
  • 2016-02-26 10:30
  • 620

css3实现圆形进度加载动画

使用到的css3属性有border-radius,transform,animation,clip等,在这里着重讲一下clip这个属性。因为博主也是第一次用这个属性。。。 这个属性就是规定盒子内显示的区域,可以有的值有auto(默认),有inherit:从父类继承,还有就是添加rect(top,ri...
  • qq_30100043
  • qq_30100043
  • 2017-07-18 16:01
  • 946

使用纯CSS3设计加载转圈圈页面

.spinner { margin: 100px auto; width: 20px; height: 20px; position: relative; } .container1 > div, .container2 > div, .container3 >...
  • ljh_learn_from_base
  • ljh_learn_from_base
  • 2017-05-30 18:28
  • 550

CSS实现的loading页面等待效果

有些页面加载起来比较慢,为了加强用户体验效果,所以一般都会做一个页面加载等待的提示,页面加载完成后消失。下面是用CSS实现的一个简单的页面加载等待效果,大家可以参考: [html] view plaincopy span style=&...
  • zhengbo0
  • zhengbo0
  • 2014-06-11 17:44
  • 1387

使用Animation-list实现等待旋转圆圈动画

我们在做网络交互或是从服务器提取数据的时候,常常会给出一个等待的动画,就是一个小圆圈转啊转的。它的使用很简单,我们只要使用Animation-list用三,五行代码,就可以搞定了。          首先,我们要找几个...
  • chenguang79
  • chenguang79
  • 2015-12-02 14:25
  • 4620

IOS 圆圈加载动画(中间带有文本,可放进度值等)

IOS 加载动画 进度条
  • u011154007
  • u011154007
  • 2016-10-31 12:49
  • 1078

CSS3圆环倒计时效果

CSS3圆环倒计时效果 .pie { width:200px; height:200px; background-color:blue; border-radius:100px; position:absolute; } .pie1{ clip:rect(0,200...
  • u014687259
  • u014687259
  • 2014-06-11 17:02
  • 779

[WPF] 圆形等待效果

转自:http://blog.csdn.net/qqamoon/article/details/7001693 自己做着玩儿的,留着以后用,效果类似下面的 GIF 动画。 [html] view plaincopy Grid...
  • dangercheng
  • dangercheng
  • 2013-11-28 11:58
  • 1892
    个人资料
    • 访问:9443次
    • 积分:192
    • 等级:
    • 排名:千里之外
    • 原创:10篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类
    文章存档
    最新评论