html 载入动画js,html通过js实现页面加载动画

1

2

3

4

5

6

7

天气Demo

8

9

10

11 /*div{12 width:100;13 height:100;14 background: red;15 position: relative;16 animation:mymove 5s infinite;17 }*/

18 .div1{

19 position:relative;

20 animation:mymove 5s infinite;

21 -moz-animation:mymove 5s infinite; /*Firefox*/

22 -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

23 -o-animation:mymove 5s infinite; /*Opera*/

24 }

25 @keyframes mymove{

26 0% {top:0px;left:0px;}

27 25%{top:0px;left:100px;}

28 50%{top:100px;left:100px;}

29 75%{top:100px;left:0px;}

30 100%{top:0px;left:0px;}

31 }32 @-moz-keyframes mymove/*Firefox*/

33 {

34 0% {top:0px;left:0px;}

35 25%{top:0px;left:100px;}

36 50%{top:100px;left:100px;}

37 75%{top:100px;left:0px;}

38 100%{top:0px;left:0px;}

39 }40

41 @-webkit-keyframes mymove/*Safari and Chrome*/

42 {

43 0% {top:0px;left:0px;}

44 25%{top:0px;left:100px;}

45 50%{top:100px;left:100px;}

46 75%{top:100px;left:0px;}

47 100%{top:0px;left:0px;}

48 }49

50 @-o-keyframes mymove/*Opera*/

51 {

52 0% {top:0px;left:0px;}

53 25%{top:0px;left:100px;}

54 50%{top:100px;left:100px;}

55 75%{top:100px;left:0px;}

56 100%{top:0px;left:0px;}

57 }58

59

60

61

62

63

64