素材网 素材网

css3制作闪烁跳跃动画进度条加载特效

下载资源()次

阅读次数()次

发布时间:2014-05-17

css3制作闪烁跳跃动画进度条加载特效
分享到:

用法简介:

来源:xw素材网

css3制作闪烁跳跃动画进度条加载特效。
文件引用:

ul {
	background-color: rgba(255, 255, 255, 0.4);
	position: relative;
	display: block;
	padding: 0;
	margin: auto;
	width: 600px;
	height: 10px;
	list-style: none;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	-ms-border-radius: 200px;
	-o-border-radius: 200px;
	border-radius: 200px;
	border: 5px solid rgba(255, 255, 255, 0.2);
	margin-top: 100px;
	-webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
}
ul li {
	position: absolute;
	margin-top: -55px;
}
ul li:nth-child(1) {
	-webkit-animation: bump 1.5s infinite;
	-moz-animation: bump 1.5s infinite;
	-o-animation: bump 1.5s infinite;
	animation: bump 1.5s infinite;
	-webkit-animation-delay: 0.1s;
	-moz-animation-delay: 0.1s;
	-o-animation-delay: 0.1s;
	animation-delay: 0.1s;
}
ul li:nth-child(1) div {
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	-ms-border-radius: 22px;
	-o-border-radius: 22px;
	border-radius: 22px;
	-webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;
	position: absolute;
	height: 60px;
	width: 80px;
	-webkit-animation: spin 0.4s infinite;
	-moz-animation: spin 0.4s infinite;
	-o-animation: spin 0.4s infinite;
	-webkit-animation: spin 0.4s infinite;
	-webkit-animation-delay: 0.1s;
    -moz-animation: spin 0.4s infinite;
	-moz-animation-delay: 0.1s;
    animation: spin 0.4s infinite;
	animation-delay: 0.1s;
	background-color: rgba(120, 120, 120, 0.3);
}
ul li:nth-child(2) {
	-webkit-animation: bump 1.5s infinite;
	-moz-animation: bump 1.5s infinite;
	-o-animation: bump 1.5s infinite;
	-webkit-animation: bump 1.5s infinite;
	-webkit-animation-delay: 0.2s; 
    -moz-animation: bump 1.5s infinite;
	-moz-animation-delay: 0.2s;
    animation: bump 1.5s infinite;
	animation-delay: 0.2s;
}
ul li:nth-child(2) div {
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	-ms-border-radius: 22px;
	-o-border-radius: 22px;
	border-radius: 22px;
	-webkit-transform-origin: center;
    -moz-transform-origin: center;
    transform-origin: center;
	position: absolute;
	height: 60px;
	width: 80px;
	-webkit-animation: spin 0.4s infinite;
	-moz-animation: spin 0.4s infinite;
	-o-animation: spin 0.4s infinite;
	-webkit-animation: spin 0.4s infinite;
	-webkit-animation-delay: 0.2s;
    -moz-animation: spin 0.4s infinite;
	-moz-animation-delay: 0.2s;
    animation: spin 0.4s infinite;
	animation-delay: 0.2s;
	background-color: rgba(120, 0, 0, 0.3);
}
ul li:nth-child(3) {
	-webkit-animation: bump 1.5s infinite;
	-moz-animation: bump 1.5s infinite;
	-o-animation: bump 1.5s infinite;
	-webkit-animation: bump 1.5s infinite;
	-webkit-animation-delay: 0.3s;
    -moz-animation: bump 1.5s infinite;
	-moz-animation-delay: 0.3s;
    animation: bump 1.5s infinite;
	animation-delay: 0.3s;
}
ul li:nth-child(3) div {
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	-ms-border-radius: 22px;
	-o-border-radius: 22px;
	border-radius: 22px;
	/* www.datouwang.com */
	-webkit-transform-origin: center; 
    -moz-transform-origin: center;
    transform-origin: center;
	position: absolute;
	height: 60px;
	width: 80px;
	-webkit-animation: spin 0.4s infinite;
	-moz-animation: spin 0.4s infinite;
	-o-animation: spin 0.4s infinite;
	-webkit-animation: spin 0.4s infinite;
	-webkit-animation-delay: 0.3s;
    -moz-animation: spin 0.4s infinite;
	-moz-animation-delay: 0.3s;
    animation: spin 0.4s infinite;
	animation-delay: 0.3s;
	background-color: rgba(120, 120, 0, 0.3);
}
ul li:nth-child(4) {
	-webkit-animation: bump 1.5s infinite;
	-moz-animation: bump 1.5s infinite;
	-o-animation: bump 1.5s infinite;
	-webkit-animation: bump 1.5s infinite;
	-webkit-animation-delay: 0.4s;
    -moz-animation: bump 1.5s infinite;
	-moz-animation-delay: 0.4s;
    animation: bump 1.5s infinite;
	animation-delay: 0.4s;
}


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。