CSS 加载等待 loading 特效

  • CSS 加载等待 loading 特效已关闭评论
  • 85 views
  • A+
所属分类：美化特效

html 代码：

  1. <div?class="loading?">
  2. ?????<div?class="loading2">
  3. ?????<div?class="loader">
  4. ?????<div?class="segment-holder">
  5. ?????<div?class="segment?one">
  6. ?????</div>
  7. ?????</div>
  8. ?????<div?class="segment-holder">
  9. ?????<div?class="segment?two">
  10. ?????</div>
  11. ?????</div>
  12. ?????<div?class="segment-holder">
  13. ?????<div?class="segment?three">
  14. ?????</div>
  15. ?????</div>
  16. ?????<div?class="segment-holder">
  17. ?????<div?class="segment?four">
  18. ?????</div>
  19. ?????</div>
  20. ?????</div>
  21. ?????<div?id="loading_text"?style="text-align:center;">
  22. ?????<p?style="text-align:center;">东西有点多,服务器有点吃力~骚等一下~(?????????)
  23. ?????</p>
  24. ?????<p?style="text-align:center;">
  25. ?????<span?id="loadingClose"><strong><a?href="javascript:void(0);"?style="color:#00D5FF?!important;font-size:16px;">不等了,点我关闭层(╯‵□′)╯︵┻━┻</a></strong></span>
  26. ?????</p>
  27. ?????</div>
  28. ?????</div>
  29. ?????</div>

 

css 代码：

  1. *?{
  2. ??box-sizing:?border-box;
  3. }
  5. body?{
  6. ??background:?white;
  7. }
  9. .loader?{
  10. ??height:?150px;
  11. ??width:?150px;
  12. ??margin:?0?auto;
  13. ??margin-top:?75px;
  14. ??transform:?rotate(-45deg);
  15. ??font-size:?0;
  16. ??line-height:?0;
  17. ??animation:?rotate-loader?5s?infinite;
  18. ??padding:?25px;
  19. ??border:?1px?solid?teal;
  20. }
  22. .segment-holder?{
  23. ??position:?relative;
  24. ??display:?inline-block;
  25. ??width:?50%;
  26. ??height:?50%;
  27. }
  29. .segment?{
  30. ??position:?absolute;
  31. ??background:?teal;
  32. }
  34. .one?{
  35. ??bottom:?0;
  36. ??height:?0;
  37. ??width:?100%;
  38. ??animation:?slide-one?1s?infinite;
  39. }
  41. .two?{
  42. ??left:?0;
  43. ??height:?100%;
  44. ??width:?0;
  45. ??animation:?slide-two?1s?infinite;
  46. ??animation-delay:?0.25s;
  47. }
  49. .three?{
  50. ??right:?0;
  51. ??height:?100%;
  52. ??width:?0;
  53. ??animation:?slide-two?1s?infinite;
  54. ??animation-delay:?0.75s;
  55. }
  57. .four?{
  58. ??top:?0;
  59. ??height:?0;
  60. ??width:?100%;
  61. ??animation:?slide-one?1s?infinite;
  62. ??animation-delay:?0.5s;
  63. }
  65. @keyframes?slide-one?{
  66. ??0%????{?height:?0;????opacity:?1;?}
  67. ??12.5%?{?height:?100%;?opacity:?1;?}
  68. ??50%???{?opacity:?1;?}
  69. ??100%??{?height:?100%;?opacity:?0;}
  70. }
  72. @keyframes?slide-two?{
  73. ??0%????{?width:?0;????opacity:?1;?}
  74. ??12.5%?{?width:?100%;?opacity:?1;?}
  75. ??50%???{?opacity:?1;?}
  76. ??100%??{?width:?100%;?opacity:?0;}
  77. }
  79. @keyframes?rotate-loader?{
  80. ??0%???{?transform:?rotate(-45deg);?}
  81. ??20%??{?transform:?rotate(-45deg);?}
  82. ??25%??{?transform:?rotate(-135deg);?}
  83. ??45%??{?transform:?rotate(-135deg);?}
  84. ??50%??{?transform:?rotate(-225deg);?}
  85. ??70%??{?transform:?rotate(-225deg);?}
  86. ??75%??{?transform:?rotate(-315deg);?}
  87. ??95%??{?transform:?rotate(-315deg);?}
  88. ??100%?{?transform:?rotate(-405deg);?}
  89. }
  90. .loading{height:100%;width:100%;position:fixed;top:0;left:0;z-index:4500;background-color:rgba(90,90,90,.6)}.loading2{position:absolute;top:30%;left:30%;z-index:1000;margin:-46px?0?0?-46px;width:600px;height:92px;}
  91. #loading_text{??margin-top:?0px;????color:?yellow;}

历史上的今天:

唯心寒辞