CSS加载等待loading特效

  • 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. }
  4. body?{
  5. ??background:?white;
  6. }
  7. .loader?{
  8. ??height:?150px;
  9. ??width:?150px;
  10. ??margin:?0?auto;
  11. ??margin-top:?75px;
  12. ??transform:?rotate(-45deg);
  13. ??font-size:?0;
  14. ??line-height:?0;
  15. ??animation:?rotate-loader?5s?infinite;
  16. ??padding:?25px;
  17. ??border:?1px?solid?teal;
  18. }
  19. .segment-holder?{
  20. ??position:?relative;
  21. ??display:?inline-block;
  22. ??width:?50%;
  23. ??height:?50%;
  24. }
  25. .segment?{
  26. ??position:?absolute;
  27. ??background:?teal;
  28. }
  29. .one?{
  30. ??bottom:?0;
  31. ??height:?0;
  32. ??width:?100%;
  33. ??animation:?slide-one?1s?infinite;
  34. }
  35. .two?{
  36. ??left:?0;
  37. ??height:?100%;
  38. ??width:?0;
  39. ??animation:?slide-two?1s?infinite;
  40. ??animation-delay:?0.25s;
  41. }
  42. .three?{
  43. ??right:?0;
  44. ??height:?100%;
  45. ??width:?0;
  46. ??animation:?slide-two?1s?infinite;
  47. ??animation-delay:?0.75s;
  48. }
  49. .four?{
  50. ??top:?0;
  51. ??height:?0;
  52. ??width:?100%;
  53. ??animation:?slide-one?1s?infinite;
  54. ??animation-delay:?0.5s;
  55. }
  56. @keyframes?slide-one?{
  57. ??0%????{?height:?0;????opacity:?1;?}
  58. ??12.5%?{?height:?100%;?opacity:?1;?}
  59. ??50%???{?opacity:?1;?}
  60. ??100%??{?height:?100%;?opacity:?0;}
  61. }
  62. @keyframes?slide-two?{
  63. ??0%????{?width:?0;????opacity:?1;?}
  64. ??12.5%?{?width:?100%;?opacity:?1;?}
  65. ??50%???{?opacity:?1;?}
  66. ??100%??{?width:?100%;?opacity:?0;}
  67. }
  68. @keyframes?rotate-loader?{
  69. ??0%???{?transform:?rotate(-45deg);?}
  70. ??20%??{?transform:?rotate(-45deg);?}
  71. ??25%??{?transform:?rotate(-135deg);?}
  72. ??45%??{?transform:?rotate(-135deg);?}
  73. ??50%??{?transform:?rotate(-225deg);?}
  74. ??70%??{?transform:?rotate(-225deg);?}
  75. ??75%??{?transform:?rotate(-315deg);?}
  76. ??95%??{?transform:?rotate(-315deg);?}
  77. ??100%?{?transform:?rotate(-405deg);?}
  78. }
  79. .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;}
  80. #loading_text{??margin-top:?0px;????color:?yellow;}

历史上的今天:

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: