css3 loading动画

haibao 笔记 2016-06-20 19:06 459
There’s something good in this world. And it’s worth fighting for ……总有一些事物是美好的,它值得我们为之而战斗。

欢迎您,我猜是来自美国的朋友! 本文共1262个字,预计阅读时间需要4分钟。

今天项目中需要修改loading动画,于是花了一会写了个css3 loading。

在这里分享出来,希望不要嫌弃我写的不好哦~~

直接上代码吧:

html:

1
2
3
4
5
6
7
       <div class="loader">
		<div class="loader-inner">
			<div></div>
			<div></div>
			<div></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
   /*loading【new】*/
   .loader {
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    z-index: 9999;
	    -webkit-transform: translate(-50%,-50%);
	    transform: translate(-50%,-50%);
	}
	.loader.s {
		position: absolute;
	}
	.loader-inner>div {
	    width: 14px;
	    height: 14px;
	    margin: 2px;
	    display: inline-block;
	    -webkit-animation: loader-inner .7s 0s infinite linear;
	    animation: loader-inner .7s 0s infinite linear;
    	border-radius: 100%;
	}
	.loader-inner.s>div {
		width: 8px;
		height: 8px;
	}
	.loader-inner>div:nth-child(1){
		background-color: #ff4400;
	}
	.loader-inner>div:nth-child(2){
		background-color: #ff6600;
	}
	.loader-inner>div:nth-child(3){
		background-color: #ff9900;
	}
	.loader-inner.s>div:nth-child(1){
		background-color: #cccccc;
	}
	.loader-inner.s>div:nth-child(2){
		background-color: #9a9a9a;
	}
	.loader-inner.s>div:nth-child(3){
		background-color: #6f6f6f;
	}
	.loader-inner>div:nth-child(2n-1) {
	    -webkit-animation-delay: .35s!important;
	    animation-delay: .35s!important;
	}
	@-webkit-keyframes loader-inner {
		50% {
			opacity:.2;
			-webkit-transform:scale(.75);
			transform:scale(.75)
		}
		100% {
			opacity:1;
			-webkit-transform:scale(1);
			transform:scale(1)
		}
	}
	@keyframes loader-inner {
		50% {
			opacity:.2;
			-webkit-transform:scale(.75);
			transform:scale(.75)
		}
		100% {
			opacity:1;
			-webkit-transform:scale(1);
			transform:scale(1)
		}
	}

顺便附带jsfiddle直接看demo:

OK, 本篇完~

本文标题:css3 loading动画

本文地址:http://www.hehaibao.com/css3-loading/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>