找回密码
 立即注册
查看: 933|回复: 1

2个博客载入css

[复制链接]

7470

回帖

2063

基友

1万

积分

萨菲尔斯

One more time One more chance

Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17

苍海的女仆

发表于 2013-10-1 11:21:58 | 显示全部楼层 |阅读模式
  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. @-webkit-keyframes l_loader_shining_inner{
  27.     from{left:0;opacity:0;-webkit-transform:scale(0);}
  28.     50%{opacity:1;-webkit-transform:scale(1);}
  29.     to{left:100%;opacity:0;-webkit-transform:scale(0);}
  30. }
  31. @keyframes l_loader{
  32.     from{top:0;height:100%;}
  33.     50%{top:calc(50% - 1px);height: 2px;}
  34.     to{top:calc(50% - 1px);height: 2px;}
  35. }
  36. @keyframes l_loader_float{
  37.     from{width:50%;opacity:1;}
  38.     50%{width:50%;opacity:1;}
  39.     to{width:0%;opacity:0.5;}
  40. }
  41. @keyframes l_loader_content{
  42.     from{opacity:1;}to{opacity:0;}
  43. }
  44. @keyframes l_loader_shining_inner{
  45.     from{left:0;opacity:0;transform:scale(0);}
  46.     50%{opacity:1;transform:scale(1);}
  47.     to{left:100%;opacity:0;transform:scale(0);}
  48. }
  49. </style>
  50. <div id="loader">
  51.     <div id="loader_left"></div>
  52.     <div id="loader_right"></div>
  53.     <div id="loader_content">少女祈禱中...</div>
  54.     <div id="loader_shining">
  55.         <div id="loader_shining_inner"></div>
  56.     </div>
  57.     <div id="loader_content2">Loading...</div>
  58. </div>

  59. //footer.php
  60. <style>
  61. #loader{height:0;-webkit-animation:l_loader ease-in 2s;animation:l_loader ease-in 2s}
  62. #loader_left,#loader_right{-webkit-animation:l_loader_float ease-out 2s;animation:l_loader_float ease-out 2s}
  63. #loader_content,#loader_content2,#loader_shining{-webkit-animation:l_loader_content ease-in 1s;animation:l_loader_content ease-in 1s;opacity:0}
  64. </style>
复制代码
原帖地址:http://ccloli.com/201308/a-new-blog-loading-css/
回复

使用道具 举报

1万

回帖

6412

基友

3万

积分

死神左手

纯白无邪

Rank: 16Rank: 16Rank: 16Rank: 16

二货勋章周年纪念勋章

发表于 2013-10-1 20:21:29 | 显示全部楼层
么么哒
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|苍海国际 ( 鲁ICP备13020644号-1 )

GMT+8, 2024-11-22 06:35 , Processed in 0.049586 second(s), 27 queries .

Powered by Discuz! Theme By eRic Modified by 4bpa

© CangHai International We Do Our Rights!

返回顶部