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立 ...
随机推荐
- [TYVJ] P1027 木瓜地
木瓜地 背景 Background USACO OCT09 4TH 描述 Description Bessie不小心游荡出Farmer John的田地,而走进了相邻的农民的地.她举起一个木瓜,木瓜 ...
- C语言实现的OOP
我倒不是为了OOP而OOP,实在是OOP的一些特征,例如封装,多态其实是软件工程思想,这些思想不分语言,遵循了这些思想可以使得程序更有弹性,更易修改和维护,避免僵化,脆弱 shape.h 该文件定义的 ...
- stm32通用定时器中断问题
在使用stm32的通用定时器定时中断的时候,发现定时器在完成初始化配置后,定时器UIF位会立刻置位,导致在使能中断后,程序会立刻进入定时器中断. 如果设计代码时不希望定时器配置完成后,立刻进入中断,可 ...
- Driver Signing changes in Windows 10
Driver Signing changes in Windows 10 RATE THIS 1 Apr 2015 1:28 PM 39 Beginning with the release of ...
- opencart修改后台文件夹名
在使用opencart进行二次开发时,若需要修改后台目录的文件夹名是可以操作的.具体步骤如下: 1.将网站后台文件夹名字改成opencartadmin 2.在该文件夹下找到config.php文件如图 ...
- Base64 加密之中文乱码
ase64编码将二进制数据按照每三个字节转换成四个字节可读字符,编码后的字符长度大约为136.1%.字符范围为 A-Z a-z 0-9 \ +.但编码后的字符串不太适合使用URL传输,中文加密 ...
- Sum 类型题目总结
Sum类的题目一般这样: input: nums[], target output: satisfied arrays/ lists/ number 拿到题目,首先分析: 1. 是几个数的sum 2. ...
- POJ 1742 Coins（多重背包） DP
参考:http://www.hankcs.com/program/cpp/poj-1742-coins.html 题意:给你n种面值的硬币,面值为a1...an,数量分别为c1...cn,求问,在这些 ...
- qt反走样（简选）
# -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' #qt反走样(简选) #概念 """ ...
- Linux文件权限管理
一.设置文件所属的用户以及所属的组(chown,chgrp) chgrp用来更改文件的组拥有者,其一般格式为:chgrp [option] group file(1)把文件test的组拥有者改为zfs ...