1.页面淡入淡出

<div id="loading" style="z-index:-999;font-size:24px;width:100%;height:24px;text-align:center;position:absolute;top:50%;margin-top:-12px"><b>加载中...</b></div>
<head>
<style>/*页面淡入淡出效果*/
@-webkit-keyframes fadeIn {
0% {opacity: 0; /*初始状态透明度为0*/}
50% {opacity: 0.5; /*中间状态透明度为0*/}
100% {opacity: 1; /*结尾状态透明度为1*/}
}

body{ font-family:"微软雅黑"; background:#f0f0f0; height:100%;
-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 5s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/
}
</style>

</head>

</html>

2.左右反转loading

<html>
<head>
<style>
#loading
{
z-index:-999;
background-color: #0098fc;
font-size:24px;
width:60px;
height:60px;
text-align:center;
position:absolute;
top:50%;
left:50%;
margin-top:-30px;
margin-left:-30px;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0%{ -webkit-transform: perspective(120px) }
50%{ -webkit-transform: perspective(120px) rotateY(180deg) }
100%{ -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}

@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>
</head>
<body style="width:100%;height:100%;">
<div id="loading"></div>
</body>
</html>

转自其他文章:css3 loading

http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html

Loading 动画效果一

HTML 代码：

<div class="spinner">

<div class="rect1"></div>

<div class="rect2"></div>

<div class="rect3"></div>

<div class="rect4"></div>

<div class="rect5"></div>

</div>

CSS 代码：

.spinner {

margin: 100px auto;

width: 50px;

height: 60px;

text-align: center;

font-size: 10px;

}

.spinner > div {

background-color: #67CF22;

height: 100%;

width: 6px;

display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;

animation: stretchdelay 1.2s infinite ease-in-out;

}

.spinner .rect2 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.spinner .rect3 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

.spinner .rect4 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.spinner .rect5 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

@-webkit-keyframes stretchdelay {

0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

20% { -webkit-transform: scaleY(1.0) }

}

@keyframes stretchdelay {

0%, 40%, 100% {

transform: scaleY(0.4);

-webkit-transform: scaleY(0.4);

} 20% {

transform: scaleY(1.0);

-webkit-transform: scaleY(1.0);

}

Loading 动画效果二

HTML 代码：

1	`<div` `class="spinner"></div>`

CSS 代码：

.spinner {

width: 60px;

height: 60px;

background-color: #67CF22;

margin: 100px auto;

-webkit-animation: rotateplane 1.2s infinite ease-in-out;

animation: rotateplane 1.2s infinite ease-in-out;

}

@-webkit-keyframes rotateplane {

0% { -webkit-transform: perspective(120px) }

50% { -webkit-transform: perspective(120px) rotateY(180deg) }

100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }

}

@keyframes rotateplane {

0% {

transform: perspective(120px) rotateX(0deg) rotateY(0deg);

-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)

} 50% {

transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

} 100% {

transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

}

Loading 动画效果三

HTML 代码：

<div class="spinner">

<div class="double-bounce1"></div>

<div class="double-bounce2"></div>

</div>

CSS 代码：

.spinner {

width: 60px;

height: 60px;

position: relative;

margin: 100px auto;

}

.double-bounce1, .double-bounce2 {

width: 100%;

height: 100%;

border-radius: 50%;

background-color: #67CF22;

opacity: 0.6;

position: absolute;

top: 0;

left: 0;

-webkit-animation: bounce 2.0s infinite ease-in-out;

animation: bounce 2.0s infinite ease-in-out;

}

.double-bounce2 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

@-webkit-keyframes bounce {

0%, 100% { -webkit-transform: scale(0.0) }

50% { -webkit-transform: scale(1.0) }

}

@keyframes bounce {

0%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 50% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

Loading 动画效果四

HTML 代码：

<div class="spinner">

<div class="cube1"></div>

<div class="cube2"></div>

</div>

CSS 代码：

.spinner {

margin: 100px auto;

width: 32px;

height: 32px;

position: relative;

}

.cube1, .cube2 {

background-color: #67CF22;

width: 30px;

height: 30px;

position: absolute;

top: 0;

left: 0;

-webkit-animation: cubemove 1.8s infinite ease-in-out;

animation: cubemove 1.8s infinite ease-in-out;

}

.cube2 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

@-webkit-keyframes cubemove {

25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }

50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }

75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }

100% { -webkit-transform: rotate(-360deg) }

}

@keyframes cubemove {

25% {

transform: translateX(42px) rotate(-90deg) scale(0.5);

-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);

} 50% {

transform: translateX(42px) translateY(42px) rotate(-179deg);

-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);

} 50.1% {

transform: translateX(42px) translateY(42px) rotate(-180deg);

-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);

} 75% {

transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

} 100% {

transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

}

Loading 动画效果五

HTML 代码：

<div class="spinner">

<div class="dot1"></div>

<div class="dot2"></div>

</div>

CSS 代码：

.spinner {

margin: 100px auto;

width: 90px;

height: 90px;

position: relative;

text-align: center;

-webkit-animation: rotate 2.0s infinite linear;

animation: rotate 2.0s infinite linear;

}

.dot1, .dot2 {

width: 60%;

height: 60%;

display: inline-block;

position: absolute;

top: 0;

background-color: #67CF22;

border-radius: 100%;

-webkit-animation: bounce 2.0s infinite ease-in-out;

animation: bounce 2.0s infinite ease-in-out;

}

.dot2 {

top: auto;

bottom: 0px;

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}

@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes bounce {

0%, 100% { -webkit-transform: scale(0.0) }

50% { -webkit-transform: scale(1.0) }

}

@keyframes bounce {

0%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 50% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

Loading 动画效果六

HTML 代码：

<div class="spinner">

<div class="bounce1"></div>

<div class="bounce2"></div>

<div class="bounce3"></div>

</div>

CSS 代码：

.spinner {

margin: 100px auto 0;

width: 150px;

text-align: center;

}

.spinner > div {

width: 30px;

height: 30px;

background-color: #67CF22;

border-radius: 100%;

display: inline-block;

-webkit-animation: bouncedelay 1.4s infinite ease-in-out;

animation: bouncedelay 1.4s infinite ease-in-out;

/* Prevent first frame from flickering when animation starts */

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.spinner .bounce1 {

-webkit-animation-delay: -0.32s;

animation-delay: -0.32s;

}

.spinner .bounce2 {

-webkit-animation-delay: -0.16s;

animation-delay: -0.16s;

}

@-webkit-keyframes bouncedelay {

0%, 80%, 100% { -webkit-transform: scale(0.0) }

40% { -webkit-transform: scale(1.0) }

}

@keyframes bouncedelay {

0%, 80%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 40% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

Loading 动画效果七

HTML 代码：

1	`<div class="spinner"></div>`

CSS 代码：

.spinner {

width: 40px;

height: 40px;

margin: 100px auto;

background-color: #333;

border-radius: 100%;

-webkit-animation: scaleout 1.0s infinite ease-in-out;

animation: scaleout 1.0s infinite ease-in-out;

}

@-webkit-keyframes scaleout {

0% { -webkit-transform: scale(0.0) }

100% {

-webkit-transform: scale(1.0);

opacity: 0;

}

@keyframes scaleout {

0% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 100% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

opacity: 0;

}

Loading 动画效果八

HTML 代码：

<div class="spinner">

<div class="spinner-container container1">

<div class="circle1"></div>

<div class="circle2"></div>

<div class="circle3"></div>

<div class="circle4"></div>

</div>

<div class="spinner-container container2">

<div class="circle1"></div>

<div class="circle2"></div>

<div class="circle3"></div>

<div class="circle4"></div>

</div>

<div class="spinner-container container3">

<div class="circle1"></div>

<div class="circle2"></div>

<div class="circle3"></div>

<div class="circle4"></div>

</div>

CSS 代码：

100

101

102

103

104

105

106

107

108

109

110

.spinner {

margin: 100px auto;

width: 20px;

height: 20px;

position: relative;

}

.container1 > div, .container2 > div, .container3 > div {

width: 6px;

height: 6px;

background-color: #333;

border-radius: 100%;

position: absolute;

-webkit-animation: bouncedelay 1.2s infinite ease-in-out;

animation: bouncedelay 1.2s infinite ease-in-out;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.spinner .spinner-container {

position: absolute;

width: 100%;

height: 100%;

}

.container2 {

-webkit-transform: rotateZ(45deg);

transform: rotateZ(45deg);

}

.container3 {

-webkit-transform: rotateZ(90deg);

transform: rotateZ(90deg);

}

.circle1 { top: 0; left: 0; }

.circle2 { top: 0; right: 0; }

.circle3 { right: 0; bottom: 0; }

.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.container3 .circle1 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

.container1 .circle2 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.container2 .circle2 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

.container3 .circle2 {

-webkit-animation-delay: -0.7s;

animation-delay: -0.7s;

}

.container1 .circle3 {

-webkit-animation-delay: -0.6s;

animation-delay: -0.6s;

}

.container2 .circle3 {

-webkit-animation-delay: -0.5s;

animation-delay: -0.5s;

}

.container3 .circle3 {

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

}

.container1 .circle4 {

-webkit-animation-delay: -0.3s;

animation-delay: -0.3s;

}

.container2 .circle4 {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

}

.container3 .circle4 {

-webkit-animation-delay: -0.1s;

animation-delay: -0.1s;

}

@-webkit-keyframes bouncedelay {

0%, 80%, 100% { -webkit-transform: scale(0.0) }

40% { -webkit-transform: scale(1.0) }

}

@keyframes bouncedelay {

0%, 80%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 40% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

From:http://www.cnblogs.com/xuejianxiyang/p/5522534.html

css特效的更多相关文章

CSS特效集锦：视觉魔法的碰撞与融合（二）
引言长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...
一个神奇却很简单的css特效
在网上看到一个前端大牛的主页,觉得他有一个特效特别酷,一开始还以为是要用什么javascript代码来实现,但仔细看一下,发觉只是用几行css代码就搞定了,我觉得挺好的. 他这个效果就是鼠标放在左半部 ...
CSS 特效 (教程还是英文的好)
Border-radius: create rounded corners with CSS! http://www.css3.info/preview/rounded-border/
css特效 - 环形文字
记一次群友问题和回答: 下面这种效果,文字是动态的,不能使用图片的情况下,前端怎么实现? 一.插件实现: arctext.js 教程地址:实现文字平滑弯曲弧形效果的插件-arctext.js 二.原生 ...
CSS特效汇集
http://www.lanrenzhijia.com/js/css3/ http://js.mobanwang.com/special/allcss/ 其他效果:http://www.cnblogs ...
一个图片滚动飞入的css特效
@keyframes bounceInLeft { from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0. ...
之前在不网站看到过关于css的一些例子今天自己也写了一个css特效
下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
【前端知识体系-CSS相关】CSS特效实现之Transition和Transform对比
CSS效果 1.使用div绘制图形(三角形)? <!DOCTYPE html> <html lang="en"> <head> <meta ...
css特效之旋转音乐播放器
本次需要用到的知识点有: transform setInerval 怎么添加背景音乐我会在下一篇介绍 https://www.cnblogs.com/zouwangblog/p/11138734.ht ...

随机推荐

Fatal error: Maximum function nesting level of '100' reached, aborting!
这个问题是由于启用了xdebug,而xdebug默认设置了函数最大嵌套数为100 解决办法: 找到php.ini文件,找到xdebug在最后加上xdebug.max_nesting_level = 5 ...
js模版引擎handlebars.js实用教程——each-循环中使用this
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
excel表格中如何将内容粘贴到筛选后的可见单元格[转]
默认情况下,筛选后excel表格进行复制粘贴,会贴到隐藏的表格. 可以添加两个辅助列来完成操作:1.在筛选前在表格右边添加"辅助1"列,在第二行输入1,按Ctrl+鼠标左键往下拉到 ...
WindowManager 实现悬浮窗详解
WindowManager 实现悬浮窗详解一:对于想直接看效果的,可以看看我的demo app. 链接:http://sj.qq.com/myapp/detail.htm?apkName=com. ...
atitit 短信接口规范与短信解决方案.docx
atitit 短信接口规范与短信解决方案.docx 1.1. 国内比较著名的短信提供商1 1.2. 短信接口规范1 1.3. 短信sdk构成1 1.4. 短信的实现1 1.5. SmsServiceY ...
paip.mysql 性能测试报告 home right
paip.mysql 性能测试报告 home right 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏地址:http://blog ...
NET中Application，Session，Cookie，ViewState，Cache，Hidden 缓存机制 .
Application 1. Application用来保存所有用户共用的信息 2. 在Asp时代,如果要保存的数据在应用程序生存期内不会或者很少发生改变,那么使用Ap ...
XML学习笔记1——概述
我对于XML是很不够重视的,认识也是非常肤浅的,因为在之前的Web经验中,基本上都可以使用JSON来代替XML,JSON网络流量少,解析快,JS支持好等这些特点让我对自己的观点坚信不疑.然而我渐渐地改 ...
Python装饰器详解
python中的装饰器是一个用得非常多的东西,我们可以把一些特定的方法.通用的方法写成一个个装饰器,这就为调用这些方法提供一个非常大的便利,如此提高我们代码的可读性以及简洁性,以及可扩展性. 在学习p ...
LigerUI Tree
<!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=utf ...

css特效

1.页面淡入淡出

2.左右反转loading

转自其他文章:css3 loading

css特效的更多相关文章

随机推荐

热门专题