2个博客载入css

汐宫栞

1. //header.php
   
2. <style>
   
3. #loading{width: 100%;height: 200%;position: fixed;background: -webkit-linear-gradient(top,rgba(255,255,255,0),#eee 100px);background: -moz-linear-gradient(top,rgba(255,255,255,0),#eee 100px);background: -o-linear-gradient(top,rgba(255,255,255,0),#eee 100px);background: -ms-linear-gradient(top,rgba(255,255,255,0),#eee 100px);background: linear-gradient(top,rgba(255,255,255,0),#eee 100px);left: 0;-webkit-animation: loading 2s;animation: loading 2s;pointer-events:none;opacity:0;top:100%;z-index:10000}@keyframes loading {from {top:-100px;opacity:1}to{top:100%;opacity:1}}@-webkit-keyframes loading {from {top:-100px;opacity:1}to{top:100%;opacity:1}}
   
4. </style>
   
5. <div id="loading"></div>

复制代码

——————————————————————————

1. //header.php
   
2. <style>
   
3. body{margin:0;padding:0}
   
4. #loader{width:100%;height:100%;position:fixed;z-index:9990}
   
5. #loader_left,#loader_right{width:50%;height:100%;background:rgba(0,0,0,.75);position:absolute;top:0;}
   
6. #loader_left{left:0}
   
7. #loader_right{right:0}
   
8. #loader_content,#loader_content2{font-size:36px;width:250px;height:50px;color:#fff;text-shadow:0 0 10px #aaa;z-index:9991;position:absolute;left:calc(50% - 125px);text-align:center;opacity:1;pointer-events:none}
   
9. #loader_content{top:calc(50% - 55px);}
   
10. #loader_content2{top:calc(50% + 5px);}
    
11. #loader_shining{width:250px;height:4px;background:-webkit-radial-gradient(contain,#FFF,rgba(255,255,255,0));background:-moz-radial-gradient(contain,#FFF,rgba(255,255,255,0));background:radial-gradient(contain,#FFF,rgba(255,255,255,0));z-index:9991;position:absolute;top:calc(50% - 2px);left:calc(50% - 125px)}
    
12. #loader_shining_inner{width:24px;height:24px;z-index:9992;position:relative;top:-10px;left:0px;-webkit-animation:l_loader_shining_inner linear 2s infinite;animation:l_loader_shining_inner linear 2s infinite;background:-webkit-radial-gradient(circle,#FFF 5px,rgba(255,255,255,0) 10px);background:-moz-radial-gradient(circle,#FFF 5px,rgba(255,255,255,0) 10px);background:radial-gradient(circle,#FFF 5px,rgba(255,255,255,0) 10px)}
    
13. @-webkit-keyframes l_loader{
    
14.     from{top:0;height:100%;}
    
15.     50%{top:calc(50% - 1px);height: 2px;}
    
16.     to{top:calc(50% - 1px);height: 2px;}
    
17. }
    
18. @-webkit-keyframes l_loader_float{
    
19.     from{width:50%;opacity:1;}
    
20.     50%{width:50%;opacity:1;}
    
21.     to{width:0%;opacity:0.5;}
    
22. }
    
23. @-webkit-keyframes l_loader_content{
    
24.     from{opacity:1;}to{opacity:0;}
    
25. }
    
26. 
    
27. @-webkit-keyframes l_loader_shining_inner{
    
28.     from{left:0;opacity:0;-webkit-transform:scale(0);}
    
29.     50%{opacity:1;-webkit-transform:scale(1);}
    
30.     to{left:100%;opacity:0;-webkit-transform:scale(0);}
    
31. }
    
32. @keyframes l_loader{
    
33.     from{top:0;height:100%;}
    
34.     50%{top:calc(50% - 1px);height: 2px;}
    
35.     to{top:calc(50% - 1px);height: 2px;}
    
36. }
    
37. @keyframes l_loader_float{
    
38.     from{width:50%;opacity:1;}
    
39.     50%{width:50%;opacity:1;}
    
40.     to{width:0%;opacity:0.5;}
    
41. }
    
42. @keyframes l_loader_content{
    
43.     from{opacity:1;}to{opacity:0;}
    
44. }
    
45. @keyframes l_loader_shining_inner{
    
46.     from{left:0;opacity:0;transform:scale(0);}
    
47.     50%{opacity:1;transform:scale(1);}
    
48.     to{left:100%;opacity:0;transform:scale(0);}
    
49. }
    
50. </style>
    
51. <div id="loader">
    
52.     <div id="loader_left"></div>
    
53.     <div id="loader_right"></div>
    
54.     <div id="loader_content">少女祈禱中...</div>
    
55.     <div id="loader_shining">
    
56.         <div id="loader_shining_inner"></div>
    
57.     </div>
    
58.     <div id="loader_content2">Loading...</div>
    
59. </div>
    
60. 
    
61. //footer.php
    
62. <style>
    
63. #loader{height:0;-webkit-animation:l_loader ease-in 2s;animation:l_loader ease-in 2s}
    
64. #loader_left,#loader_right{-webkit-animation:l_loader_float ease-out 2s;animation:l_loader_float ease-out 2s}
    
65. #loader_content,#loader_content2,#loader_shining{-webkit-animation:l_loader_content ease-in 1s;animation:l_loader_content ease-in 1s;opacity:0}
    
66. </style>

复制代码

原帖地址：http://ccloli.com/201308/a-new-blog-loading-css/

上邪

么么哒