css特效
1.页面淡入淡出
<html style="background:#0086b5">
<!--简易loading-->
<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 代码:
1
2
3
4
5
6
7
|
<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 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
.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.2 s infinite ease-in-out; animation: stretchdelay 1.2 s infinite ease-in-out; } .spinner .rect 2 { -webkit-animation-delay: -1.1 s; animation-delay: -1.1 s; } .spinner .rect 3 { -webkit-animation-delay: -1.0 s; animation-delay: -1.0 s; } .spinner .rect 4 { -webkit-animation-delay: -0.9 s; animation-delay: -0.9 s; } .spinner .rect 5 { -webkit-animation-delay: -0.8 s; animation-delay: -0.8 s; } @-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 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
.spinner { width : 60px ; height : 60px ; background-color : #67CF22 ; margin : 100px auto ; -webkit-animation: rotateplane 1.2 s infinite ease-in-out; animation: rotateplane 1.2 s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective( 120px ) } 50% { -webkit-transform: perspective( 120px ) rotateY( 180 deg) } 100% { -webkit-transform: perspective( 120px ) rotateY( 180 deg) rotateX( 180 deg) } } @keyframes rotateplane { 0% { transform: perspective( 120px ) rotateX( 0 deg) rotateY( 0 deg); -webkit-transform: perspective( 120px ) rotateX( 0 deg) rotateY( 0 deg) } 50% { transform: perspective( 120px ) rotateX( -180.1 deg) rotateY( 0 deg); -webkit-transform: perspective( 120px ) rotateX( -180.1 deg) rotateY( 0 deg) } 100% { transform: perspective( 120px ) rotateX( -180 deg) rotateY( -179.9 deg); -webkit-transform: perspective( 120px ) rotateX( -180 deg) rotateY( -179.9 deg); } } |
Loading 动画效果三
HTML 代码:
1
2
3
4
|
<div class = "spinner" > <div class = "double-bounce1" ></div> <div class = "double-bounce2" ></div> </div> |
CSS 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
.spinner { width : 60px ; height : 60px ; position : relative ; margin : 100px auto ; } .double-bounce 1 , .double-bounce 2 { width : 100% ; height : 100% ; border-radius: 50% ; background-color : #67CF22 ; opacity: 0.6 ; position : absolute ; top : 0 ; left : 0 ; -webkit-animation: bounce 2.0 s infinite ease-in-out; animation: bounce 2.0 s infinite ease-in-out; } .double-bounce 2 { -webkit-animation-delay: -1.0 s; animation-delay: -1.0 s; } @-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 代码:
1
2
3
4
|
<div class= "spinner" > <div class= "cube1" ></div> <div class= "cube2" ></div> </div> |
CSS 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
.spinner { margin : 100px auto ; width : 32px ; height : 32px ; position : relative ; } .cube 1 , .cube 2 { background-color : #67CF22 ; width : 30px ; height : 30px ; position : absolute ; top : 0 ; left : 0 ; -webkit-animation: cubemove 1.8 s infinite ease-in-out; animation: cubemove 1.8 s infinite ease-in-out; } .cube 2 { -webkit-animation-delay: -0.9 s; animation-delay: -0.9 s; } @-webkit-keyframes cubemove { 25% { -webkit-transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 ) } 50% { -webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg) } 75% { -webkit-transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 ) } 100% { -webkit-transform: rotate( -360 deg) } } @keyframes cubemove { 25% { transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 ); -webkit-transform: translateX( 42px ) rotate( -90 deg) scale( 0.5 ); } 50% { transform: translateX( 42px ) translateY( 42px ) rotate( -179 deg); -webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -179 deg); } 50.1% { transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg); -webkit-transform: translateX( 42px ) translateY( 42px ) rotate( -180 deg); } 75% { transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 ); -webkit-transform: translateX( 0px ) translateY( 42px ) rotate( -270 deg) scale( 0.5 ); } 100% { transform: rotate( -360 deg); -webkit-transform: rotate( -360 deg); } } |
Loading 动画效果五
HTML 代码:
1
2
3
4
|
<div class= "spinner" > <div class= "dot1" ></div> <div class= "dot2" ></div> </div> |
CSS 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
.spinner { margin : 100px auto ; width : 90px ; height : 90px ; position : relative ; text-align : center ; -webkit-animation: rotate 2.0 s infinite linear; animation: rotate 2.0 s infinite linear; } .dot 1 , .dot 2 { width : 60% ; height : 60% ; display : inline- block ; position : absolute ; top : 0 ; background-color : #67CF22 ; border-radius: 100% ; -webkit-animation: bounce 2.0 s infinite ease-in-out; animation: bounce 2.0 s infinite ease-in-out; } .dot 2 { top : auto ; bottom : 0px ; -webkit-animation-delay: -1.0 s; animation-delay: -1.0 s; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate( 360 deg) }} @keyframes rotate { 100% { transform: rotate( 360 deg); -webkit-transform: rotate( 360 deg) }} @-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 代码:
1
2
3
4
5
|
<div class= "spinner" > <div class= "bounce1" ></div> <div class= "bounce2" ></div> <div class= "bounce3" ></div> </div> |
CSS 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
.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.4 s infinite ease-in-out; animation: bouncedelay 1.4 s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both ; animation-fill-mode: both ; } .spinner .bounce 1 { -webkit-animation-delay: -0.32 s; animation-delay: -0.32 s; } .spinner .bounce 2 { -webkit-animation-delay: -0.16 s; animation-delay: -0.16 s; } @-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 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
.spinner { width : 40px ; height : 40px ; margin : 100px auto ; background-color : #333 ; border-radius: 100% ; -webkit-animation: scaleout 1.0 s infinite ease-in-out; animation: scaleout 1.0 s 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 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<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> </div> |
CSS 代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
.spinner { margin : 100px auto ; width : 20px ; height : 20px ; position : relative ; } .container 1 > div, .container 2 > div, .container 3 > div { width : 6px ; height : 6px ; background-color : #333 ; border-radius: 100% ; position : absolute ; -webkit-animation: bouncedelay 1.2 s infinite ease-in-out; animation: bouncedelay 1.2 s infinite ease-in-out; -webkit-animation-fill-mode: both ; animation-fill-mode: both ; } .spinner .spinner-container { position : absolute ; width : 100% ; height : 100% ; } .container 2 { -webkit-transform: rotateZ( 45 deg); transform: rotateZ( 45 deg); } .container 3 { -webkit-transform: rotateZ( 90 deg); transform: rotateZ( 90 deg); } .circle 1 { top : 0 ; left : 0 ; } .circle 2 { top : 0 ; right : 0 ; } .circle 3 { right : 0 ; bottom : 0 ; } .circle 4 { left : 0 ; bottom : 0 ; } .container 2 .circle 1 { -webkit-animation-delay: -1.1 s; animation-delay: -1.1 s; } .container 3 .circle 1 { -webkit-animation-delay: -1.0 s; animation-delay: -1.0 s; } .container 1 .circle 2 { -webkit-animation-delay: -0.9 s; animation-delay: -0.9 s; } .container 2 .circle 2 { -webkit-animation-delay: -0.8 s; animation-delay: -0.8 s; } .container 3 .circle 2 { -webkit-animation-delay: -0.7 s; animation-delay: -0.7 s; } .container 1 .circle 3 { -webkit-animation-delay: -0.6 s; animation-delay: -0.6 s; } .container 2 .circle 3 { -webkit-animation-delay: -0.5 s; animation-delay: -0.5 s; } .container 3 .circle 3 { -webkit-animation-delay: -0.4 s; animation-delay: -0.4 s; } .container 1 .circle 4 { -webkit-animation-delay: -0.3 s; animation-delay: -0.3 s; } .container 2 .circle 4 { -webkit-animation-delay: -0.2 s; animation-delay: -0.2 s; } .container 3 .circle 4 { -webkit-animation-delay: -0.1 s; animation-delay: -0.1 s; } @-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 ...
随机推荐
- vim添加或删除多行注释
一.多行注释的添加 1. vim的命令模式下(ESC 进入命令模式): 2. 按CTRL+V进入可视化模式(VISUAL BLOCK): 注意:vim命令模式下v进入的是visual模式,ctrl+v ...
- Redis总结笔记(一):安装和常用命令
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/112.html?1455860824 一.redis简单介绍 redis是 ...
- 每天一个linux命令(11):nl命令
nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...
- dic+css页面布局分享
HTML部分代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- 【Discuz】关闭QQ互联插件提示信息:系统繁忙,请稍后再试
版本:X3.2.20160601 提示信息 系统繁忙,请稍后再试 解决方案 Step1.删除QQ互联插件目录 网站的根目录\source\plugin\qqconnect Step2.上传原始QQ互联 ...
- 《BI那点儿事》数据挖掘初探
什么是数据挖掘? 数据挖掘(Data Mining),又称信息发掘(Knowledge Discovery),是用自动或半自动化的方法在数据中找到潜在的,有价值的信息和规则. 数据挖掘技术来源于数据库 ...
- 邻接表有向图(三)之 Java详解
前面分别介绍了邻接表有向图的C和C++实现,本文通过Java实现邻接表有向图. 目录 1. 邻接表有向图的介绍 2. 邻接表有向图的代码说明 3. 邻接表有向图的完整源码 转载请注明出处:http:/ ...
- Java多线程系列--“基础篇”05之 线程等待与唤醒
概要 本章,会对线程等待/唤醒方法进行介绍.涉及到的内容包括:1. wait(), notify(), notifyAll()等方法介绍2. wait()和notify()3. wait(long t ...
- 用ticons指令结合ImageMagickDisplay工具批量生成Android适应图片
用ticons指令结合ImageMagickDisplay工具批量生成Android适应图片 ticons的用法可以百度 这里记录下具体的编译方法 在安装了ticons和ImageMagickDisp ...
- Javascript的实例化与继承:请停止使用new关键字
本文同时也发表在我另一篇独立博客 <Javascript的实例化与继承:请停止使用new关键字>(管理员请注意!这两个都是我自己的原创博客!不要踢出首页!不是转载!已经误会三次了!) 标题 ...