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立 ...
随机推荐
- Effective Java2读书笔记-类和接口（二）
第15条:使可变性最小化 通过一个复数类来看不可变类. public final class Complex { private final double re; private final doub ...
- Spring + Tomcat 启动报错java.lang.ClassNotFoundException: org.apache.commons.pool.impl.GenericObjectPool
错误如下: -- ::,-[TS] INFO http-- org.springframework.beans.factory.support.DefaultListableBeanFactory - ...
- hdu 1116 Play on Words
http://acm.hdu.edu.cn/showproblem.php?pid=1116 欧拉通路和欧拉回路 #include <cstdio> #include <cstrin ...
- ElasticSearch大批量数据入库
最近着手处理大批量数据的任务. 现状是这样的,一个数据采集程序承载大批量数据的存储和检索.后期可能需要对大批量数据进行统计. 数据分布情况 13个点定时生成采集结果到4个文件(小文件生成周期是5分钟) ...
- Java数据结构: java.util.BitSet源码学习
接着上一篇Blog:一道面试题与Java位操作 和 BitSet 库的使用,分析下Java源码中BitSet类的源码. 位图(Bitmap),即位(Bit)的集合,是一种常用的数据结构,可用于记录大量 ...
- STL List容器
转载http://www.cnblogs.com/fangyukuan/archive/2010/09/21/1832364.html 各个容器有很多的相似性.先学好一个,其它的就好办了.先从基础开始 ...
- python字符集选择
# coding=utf8 或者 # -*- coding:utf-8 -*- 在python2 中默认是ASCII码的字符集,但可以引入其他的字符集 这个需要在头信息中引入: 而在python3中 ...
- 无心插柳OR志在必得？阿里推“来往”的意图
近年来,阿里巴巴在外围的动作确实不少,投资新浪微博.投资陌陌,配合阿里自身的一些战略调整,让人觉得这家公司似乎正在经历一场前所未有的“蜕变”.其实这也不难理解,在BAT三国演义中,任何一方都不 ...
- Android日志系统驱动程序Logger源代码分析
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6595744 我们知道,在Android系统中, ...
- C#软件开发实例.私人订制自己的屏幕截图工具（七）加入放大镜的功能
上一篇:C#软件开发实例.私人订制自己的屏幕截图工具(六)加入配置管理功能 因为截图时可能须要精确截取某一部分,所以须要放大镜的功能,这样截取的时候才更easy定位截图的位置. 加入PictureBo ...