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立 ...
随机推荐
- [POJ] 3368 / [UVA] 11235 - Frequent values [ST算法]
2007/2008 ACM International Collegiate Programming Contest University of Ulm Local Contest Problem F ...
- 通过IIS发布站点和VS2012自带发布网站
vs2012通过IIS发布站点 http://jingyan.baidu.com/article/0964eca2d7beeb8285f536bd.html 用VS2012自带发布网站 http:// ...
- Find out C++ Memory Usage in Code
You can use Microsoft Platform SDK functions to get the heap size at a specific point. If get the he ...
- The Most Wanted Letter
The Most Wanted Letter You are given a text, which contains different english letters and punctuatio ...
- logstash date插件介绍
时间处理(Date) 之前章节已经提过, filters/date 插件可以用来转换你的日志记录中的时间字符串,变成 LogStash::Timestamp 对象,然后转存到 @timestamp 字 ...
- 【转】【Android】HAL分析
原文网址:http://www.cnblogs.com/lcw/p/3335505.html HAL概述 以下是基于android4.0.3,对应其他低版本的代码,可能有所差异,但基本大同小异. An ...
- 【转】Android 4.0.3 CTS 测试
原文网址:http://blog.csdn.net/zxm317122667/article/details/8508013 Android-CTS 4.0.3测试基本配置 1. Download C ...
- js网页返回页面顶部的小方法
咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...
- servlet核心API的UML图
- 浅谈Android系统开发中LOG的使用
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6581828 在程序开发过程中,LOG是广泛使用 ...