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立 ...
随机推荐
- DataGrid导出excel
DAL://产品信息导出——LPH public DataTable ExportRelease(string type) { string sql = "SELECT [ProductID ...
- Keil 中关于C语言编译生成汇编代码函数名规则
在keil 中 C语言的函数有带参数和不带参数之分. 一般的资料里说fun(void)类型的函数不带参数,所以,keil编译器生成的汇编的调用地址(函数名) 为fun.这没有错.事实上,不管C语言的函 ...
- 设置EntityFramework 在开发时自动更新数据库
1. NuGet 下载EntityFramework. 2. 定义Context 和 打开NuGet 命令 执行 Enable-Migrations , Libaray.DAL.Migrations. ...
- GET: https://login.weixin.qq.com/cgi-bin/mmwebwx-bin/login? loginicon=true &uuid=odcptUu2JA==&tip=0
GET: https://login.weixin.qq.com/cgi-bin/mmwebwx-bin/login? loginicon=true &uuid=odcptUu2JA==&am ...
- Divide and Conquer.(Merge Sort) by sixleaves
algo-C1-Introductionhtml, body {overflow-x: initial !important;}html { font-size: 14px; }body { marg ...
- oracle 12g sqlplus安装
一.下载oracle 12g sqlplus软件 linux 64位操作系统,oracle安装包地址 http://www.oracle.com/technetwork/topics/linuxx86 ...
- Jenkins动态部署方案
在之前一个项目开发中使用到了jenkins自动化测试,根据实际应用,简单整理了其部署方案. 1.部署 2.项目构建 3.重部署 1 部署 登录Jenkins应用管理界面 1)选中一个服务器上已在jen ...
- android CMWAP, CMNET有何差别
什么是CMNET,什么是CMWAP? 答:CMWAP和CMNET仅仅是中国移动为其划分的两个GPRS接入方式.中国移动对CMWAP作了一定的限制,主要表如今CMWAP接入时仅仅能訪问GPRS网络内的I ...
- CREATE PROCEDURE
1 CREATE PROCEDURE(创建) CREATE PROCEDURE存储过程名(參数列表) BEGIN SQL语句代码块 END 注意: 由括号包围的參数列必须总是存在.假设没有參数,也该使 ...
- [Hapi.js] POST and PUT request payloads
hapi makes handling POST and PUT payloads easy by buffering and parsing them automatically without r ...