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

 1 DOCTYPE html>
 2 <html lang="zh-CN">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>天气Demotitle>
 8     <link rel="stylesheet" href="css/dragula.css" type="text/css" media="screen" />
 9     <link rel="stylesheet" href="css/yongjiu.css" type="text/css" media="screen" />
10     <style>
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     style>
59   head>
60 <body onload="loding()">
61 
62     <div id="div1">
63         <img src="star.gif" style="width:100%;"/>
64     div>
65     <div id="div2" style="display:none;">
66     <div class="dragula_wrapper">
67         <div id="left1" class="dragula_container">
68             <div>
69             
70                 <iframe style="border:2px red dashed" src="http://www.thinkpage.cn/weather/weather.aspx?c=CHXX0008&l=zh-CN&p=MSN&a=1&u=C&s=1&m=0&x=1&d=3&fc=&bgc=&bc=" frameborder="0" scrolling="no" width="200" height="260" allowtransparency="true">iframe>
71             div>
72         div>
73         <div id="right1" class="dragula_container">
74             <div>
75             
76                 <iframe src="http://ueditor.baidu.com/ueditor/dialogs/map/show.html#center=108.937459,34.303273&zoom=18&width=530&height=340&markers=108.937899,34.303348&markerStyles=l,A" frameborder="0" width="534" height="344">iframe>
77             div>
78         div>
79     div>
80     div>
81 
82 
83 <script type="text/javascript" src="js/dragula.js">script>
84 <script type="text/javascript">
85 dragula([left1,right1]);
86 function loding(){
87     var input = document.getElementById("div1");
88     input.style.display="none";
89     var input1 = document.getElementById("div2");
90     input1.style.display="inline";
91 }
92 script>
93 body>
94 html>
View Code

新手参考资料

转载于:https://www.cnblogs.com/lovewl2/p/4457618.html

你可能感兴趣的:(html通过js实现页面加载动画)