3款漂亮的CSS3 Loading动画实例教程

Hello，亲们，这次让我来带着大家去创建3个非常漂亮的CSS3 Loading动画吧。我没记错的话这个CSS3 Loading动画只能运行在firefox、chrome和safari浏览器上，你还在等什么，赶紧往下看吧！

VIEW DEMO

第1个CSS3 Loading动画例子

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

ul#loadbar {

list-style:none;

width:140px;

margin:0 auto;

padding-top:50px;

padding-bottom:75px;

}

ul#loadbar li {

float:left;

position:relative;

width:11px;

height:26px;

margin-left:1px;

border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;

background:#000;

}

ul#loadbar li:first-child { margin-left:0; }

.bar {

background-color:#2187e7;

background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);

background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);

width:11px;

height:26px;

opacity:0;

-webkit-animation:fill .5s linear forwards;

-moz-animation:fill .5s linear forwards;

}

#layerFill1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }

#layerFill2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; }

#layerFill3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }

#layerFill4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; }

#layerFill5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; }

#layerFill6 { -moz-animation-delay:3s; -webkit-animation-delay:3s; }

#layerFill7 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; }

#layerFill8 { -moz-animation-delay:4s; -webkit-animation-delay:4s; }

#layerFill9 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; }

#layerFill10 { -moz-animation-delay:5s; -webkit-animation-delay:5s; }

@-moz-keyframes fill {

0%{ opacity:0; }

100%{ opacity:1; }

}

@-webkit-keyframes fill {

0%{ opacity:0; }

100%{ opacity:1; }

}