CSS3轻松如何实现清新 Loading 效果的简单实例

互联网
当你不再需要通过别人的认可来证明自己的时候，你就真的强大了。请记住，守住内心的淡定与宁静，才能在茫茫的人生旅程中欣赏到美丽的风景。不必仰望别人，自己亦是风景。

至今HTML5中国已经为大家分享过几百种基于CSS3的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。

第一种效果：

HTML部分

XML/HTML Code复制内容到剪贴板
  1. <divclass="loading">
  2. <span></span>
  3. <span></span>
  4. <span></span>
  5. <span></span>
  6. <span></span>
  7. </div>

CSS3部分

CSS Code复制内容到剪贴板
  1. .loading{
  2. width:80px;
  3. height:40px;
  4. margin:0auto;
  5. margin-top:100px;
  6. }
  7. .loadingspan{
  8. display:inline-block;
  9. width:8px;
  10. height:100%;
  11. border-radius:4px;
  12. background:lightgreen;
  13. -webkit-animation:load1seaseinfinite;
  14. }
  15. @-webkit-keyframesload{
  16. 0%,100%{
  17. height:40px;
  18. background:lightgreen;
  19. }
  20. 50%{
  21. height:70px;
  22. margin:-15px0;
  23. background:lightblue;
  24. }
  25. }
  26. .loadingspan:nth-child(2){
  27. -webkit-animation-delay:0.2s;
  28. }
  29. .loadingspan:nth-child(3){
  30. -webkit-animation-delay:0.4s;
  31. }
  32. .loadingspan:nth-child(4){
  33. -webkit-animation-delay:0.6s;
  34. }
  35. .loadingspan:nth-child(5){
  36. -webkit-animation-delay:0.8s;
  37. }

第二种效果：

HTML部分

XML/HTML Code复制内容到剪贴板
  1. <divclass="loadEffect">
  2. <span></span>
  3. <span></span>
  4. <span></span>
  5. <span></span>
  6. <span></span>
  7. <span></span>
  8. <span></span>
  9. <span></span>
  10. </div>

CSS3部分

CSS Code复制内容到剪贴板
  1. .loadEffect{
  2. width:100px;
  3. height:100px;
  4. position:relative;
  5. margin:0auto;
  6. margin-top:100px;
  7. }
  8. .loadEffectspan{
  9. display:inline-block;
  10. width:16px;
  11. height:16px;
  12. border-radius:50%;
  13. background:lightgreen;
  14. position:absolute;
  15. -webkit-animation:load1.04seaseinfinite;
  16. }
  17. @-webkit-keyframesload{
  18. 0%{
  19. opacity:1;
  20. }
  21. 100%{
  22. opacity:0.2;
  23. }
  24. }
  25. .loadEffectspan:nth-child(1){
  26. left:0;
  27. top:50%;
  28. margin-top:-8px;
  29. -webkit-animation-delay:0.13s;
  30. }
  31. .loadEffectspan:nth-child(2){
  32. left:14px;
  33. top:14px;
  34. -webkit-animation-delay:0.26s;
  35. }
  36. .loadEffectspan:nth-child(3){
  37. left:50%;
  38. top:0;
  39. margin-left:-8px;
  40. -webkit-animation-delay:0.39s;
  41. }
  42. .loadEffectspan:nth-child(4){
  43. top:14px;
  44. rightright:14px;
  45. -webkit-animation-delay:0.52s;
  46. }
  47. .loadEffectspan:nth-child(5){
  48. rightright:0;
  49. top:50%;
  50. margin-top:-8px;
  51. -webkit-animation-delay:0.65s;
  52. }
  53. .loadEffectspan:nth-child(6){
  54. rightright:14px;
  55. bottombottom:14px;
  56. -webkit-animation-delay:0.78s;
  57. }
  58. .loadEffectspan:nth-child(7){
  59. bottombottom:0;
  60. left:50%;
  61. margin-left:-8px;
  62. -webkit-animation-delay:0.91s;
  63. }
  64. .loadEffectspan:nth-child(8){
  65. bottombottom:14px;
  66. left:14px;
  67. -webkit-animation-delay:1.04s;
  68. }

上面这两个都是大家常用的加载效果，下面的就不依依的现实代码了，有需要的小伙伴请给我留言！

更多效果如下所示：

第三种loading效果

第四种loading效果

第五种loading效果

第六种loading效果

第七种loading效果

这些效果都是用CSS3实现的，是不是很厉害，想要学习的小伙伴记得给我留言哦！如果大家有更牛气的效果记得偷偷的发给我哦！

以上这篇CSS3轻松实现清新 Loading 效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例