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 ...
随机推荐
- Thrift架构~动态Thrift插件的注入
先说AOP 说到注入,大家就会想起来IoC和AOP,确实如些,这一讲中,我们通过unity来实现对thrift插件的动态注入,事实上,这个功能在以后的项目中经常要用到,比如,你将一些功能分发到指定服务 ...
- MVVM架构~使用boxy和knockoutjs实现编辑功能
返回目录 这个功能我认为非常有用,尤其在后台管理系统中,它对用户来说,使用体验这块非常不错,下面是它的截图
- js笔记——js里的null和undefined
以下内容摘录自阮一峰的<语法概述 -- JavaScript 标准参考教程(alpha)>章节『5.null和undefined』,以做备忘. null与undefined都可以表示&qu ...
- Atitit 游戏引擎---物理系统(1)------爆炸效果
Atitit 游戏引擎---物理系统(1)------爆炸效果 1.1. 动画框架的来源flex,jqueryuijs,anim , cocos2d 1 1.2. Jqueryui的特效库 1 1.3 ...
- 让AngularJS的$http 服务像jQuery.ajax()一样工作
让AngularJS的$http 服务像jQuery.ajax()一样工作 $http的post . 请求默认的content-Type=application/json . 提交的是json对象的字 ...
- Python字符进度条
Python字符进度条 看看这个神奇的module from tqdm import trange from time import sleep for r in trange(10, 1, -1): ...
- Linux常用命令01
Linux对于我们来说,就是跑程序的运行平台,简单的来说,就是服务器,自己也没怎么系统的学习Linux的命令,随着项目的需要, 比如要查找日志,哪里出问题了,哪里报错了,因此自己也慢慢地懂一些常用的L ...
- KnockoutJS 3.X API 第五章 高级应用(1) 创建自定义绑定
您不仅限于使用内置的绑定,如click,value绑定等,您可以创建自己的绑定. 这是如何控制视图模型如何与DOM元素进行交互,并且为您提供了大量的灵活性,以便于以复用的方式封装复杂的行为. 注册绑定 ...
- css知多少(5)——选择器
1. 引言 从本节开始,就进入本系列的第二个部分——css和html的结合——说白了就是选择器. CSS中定义了样式,如何将这些样式设置到相应的html节点上?就不得不通过选择器.让浏览器知道css选 ...
- 【WP 8.1开发】同时更新多种磁贴
一般应用程序都会包含多个尺寸的磁贴,如小磁贴(71×71).中磁贴(150×150)和宽磁贴(310×150).常规的磁贴更新做法是用XML文档来定义更新内容,然后再提交更新.如: <tile& ...