css3的loadding效果
<!DOCTYPE html>
<html>
<head>
<title>CSS3 loading效果</title>
<meta charset="utf-8" />
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
#loading {
position: absolute;
left: 600px;
top: 147px;
color: #666;
}
#loading span{
display: block;
position: absolute;
top: 32px;
height: 10px;
width: 10px;
border: 1px solid #999;
background-color: #CCC;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2.5s;
}
#loading span:nth-of-type(1){
left: 0;
-webkit-animation-name: animationloading1;
}
#loading span:nth-of-type(2){
left: 20px;
-webkit-animation-name: animationloading2;
}
#loading span:nth-of-type(3){
left: 40px;
-webkit-animation-name: animationloading3;
}
#loading span:nth-of-type(4){
left: 60px;
-webkit-animation-name: animationloading4;
}
#loading span:nth-of-type(5){
left: 80px;
-webkit-animation-name: animationloading5;
}
@-webkit-keyframes animationloading1{
0%{
-webkit-transform: scale(1);
background-color: #CCC;
}
20%{
-webkit-transform: scale(1.5);
background-color: #999;
}
21%{
-webkit-transform: scale(1);
background-color: #CCC;
}
100%{
-webkit-transform: scale(1);
background-color: #CCC;
}
}
@-webkit-keyframes animationloading2{
0%{
-webkit-transform: scale(1);
background-color: #CCC;
}
20%{
-webkit-transform: scale(1);
background-color: #CCC;
}
40%{
-webkit-transform: scale(1.5);
background-color: #999;
}
41%{
-webkit-transform: scale(1);
background-color: #CCC;
}
100%{
-webkit-transform: scale(1);
background-color: #CCC;
}
}
@-webkit-keyframes animationloading3{
0%{
-webkit-transform: scale(1);
background-color: #CCC;
}
40%{
-webkit-transform: scale(1);
background-color: #CCC;
}
60%{
-webkit-transform: scale(1.5);
background-color: #999;
}
61%{
-webkit-transform: scale(1);
background-color: #CCC;
}
100%{
-webkit-transform: scale(1);
background-color: #CCC;
}
}
@-webkit-keyframes animationloading4{
0%{
-webkit-transform: scale(1);
background-color: #CCC;
}
60%{
-webkit-transform: scale(1);
background-color: #CCC;
}
80%{
-webkit-transform: scale(1.5);
background-color: #999;
}
81%{
-webkit-transform: scale(1);
background-color: #CCC;
}
100%{
-webkit-transform: scale(1);
background-color: #CCC;
}
}
@-webkit-keyframes animationloading5{
0%{
-webkit-transform: scale(1);
background-color: #CCC;
}
80%{
-webkit-transform: scale(1);
background-color: #CCC;
}
100%{
-webkit-transform: scale(1.5);
background-color: #999;
}
}
</style>
</head>
<body>
<div id="loading">
<h3>正在转入<a href="http://www.baidu.com">CSS3持续一组连贯动画</a> 加载中……请稍候进入百度搜索</h3>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
css3的loadding效果的更多相关文章
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css3幻灯片换位效果
<title>css3幻灯片换位效果</title> <style type="text/css"> .flowGallery {width: ...
- 第八十节，CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 ...
- html+css3实现长方体效果
网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看. 2017-07-25 21:30:23 h ...
- Css3实现波浪效果3-静态波纹
一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...
- 测试css3的动画效果在display:none的时候不耗费性能
也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...
- css3写下雨效果
css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
随机推荐
- ldd命令--查看命令依赖的库文件
.在制作自己的发行版时经常需要判断某条命令需要哪些共享库文件的支持,以确保指定的命令在独立的系统内可以可靠的运行:在Linux环境下通过ldd命令即可实现,在终端下执行:ldd /bin/ls //l ...
- android获取sdk更新
http://www.th7.cn/Program/Android/201310/154981.shtml 网上许多解决 Android SDK Manager 无法更新(下载)的问题的方法基本都是将 ...
- 使用SALT-API进入集成开发的简单样例
测试的时候,可以CURL -K,但真正作集成的时候,却是不可以的. 必须,不可以让TOKEN满天飞吧. 现在进入这个阶段了.写个样例先: import salt import salt.auth im ...
- jQuery对象转换为DOM对象
第一种方法:借助数组下标来读取jQuery对象集合中的某个DOM元素对象. <script src="Scripts/jquery-1.4.1.js" type=" ...
- PowerShell为什么强大
PowerShell为什么强大 本文索引 [隐藏] 5.1举例介绍 1破天荒的方便 2面向对象 3绑上.NET这棵大树 4强大的兼容性 5基于平台的可扩展性 微软是一个很”低调”的公司,取名为微软,感 ...
- C3P0连接池详细配置
C3P0连接池详细配置 转自http://msq.javaeye.com/blog/60387 <c3p0-config> <default-config> <!--当连 ...
- 【转】图文并茂 Ubuntu使用Thunderbird方法指南
原文网址:http://os.51cto.com/art/201101/243445.htm Ubuntu 是一个启动速度超快.界面友好.安全性好的操作系统,它适用于桌面电脑.笔记本电脑.服务器以及上 ...
- C#开发者准备的通用性代码审查清单
这是为C#开发者准备的通用性代码审查清单,可以当做开发过程中的参考.这是为了确保在编码过程中,大部分通用编码指导原则都能注意到.对于新手和缺乏经验(0到3年工作经验)的开发者,参考这份清单编码会很帮助 ...
- 工具：BT Sync 同步文件
随着互联网的发展,文件共享变得越来越便捷,但是文件的共享过程是不是安全,这一直是人们关心的问题,今天向大家介绍一个共享工具,可以实现便捷的安全共享. 这个工具分为两个部分,一个是服务器部分, ...
- ecshop 管理员不需要旧密码