当前位置:

css3 loading动画

本文最后更新于2016-06-20,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共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, 本篇完~

版权申明:本文地址 ,本博客所有文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

我要说两句