CSS3如何实现10种Loading效果

网络
夕阳的金辉把绿色的林海染成金黄一片。火红的太阳慢慢地西落了，归鸟们纷纷从我头上飞过，飞回到它们的小巢。一轮明月从东方静悄悄地升上来。夜空中美丽的星星，似乎在眨着眼睛对我说：夜，来了！

用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……

第1种效果：

代码如下：

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

第2种效果：

代码如下：

XML/HTML Code复制内容到剪贴板
  1. <divclass="loading">
  2. <span></span>
  3. </div>
CSS Code复制内容到剪贴板
  1. .loading{
  2. width:150px;
  3. height:4px;
  4. border-radius:2px;
  5. margin:0auto;
  6. margin-top:100px;
  7. position:relative;
  8. background:lightgreen;
  9. -webkit-animation:changeBgColor1.04sease-ininfinitealternate;
  10. }
  11. .loadingspan{
  12. display:inline-block;
  13. width:16px;
  14. height:16px;
  15. border-radius:50%;
  16. background:lightgreen;
  17. position:absolute;
  18. margin-top:-7px;
  19. margin-left:-8px;
  20. -webkit-animation:changePosition1.04sease-ininfinitealternate;
  21. }
  22. @-webkit-keyframeschangeBgColor{
  23. 0%{
  24. background:lightgreen;
  25. }
  26. 100%{
  27. background:lightblue;
  28. }
  29. }
  30. @-webkit-keyframeschangePosition{
  31. 0%{
  32. background:lightgreen;
  33. }
  34. 100%{
  35. margin-left:142px;
  36. background:lightblue;
  37. }
  38. }

第3-5种效果：

代码如下：

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

第3-5种效果的css样式分别为：

CSS Code复制内容到剪贴板
  1. .loading{
  2. width:150px;
  3. height:15px;
  4. margin:0auto;
  5. position:relative;
  6. margin-top:100px;
  7. }
  8. .loadingspan{
  9. position:absolute;
  10. width:15px;
  11. height:100%;
  12. border-radius:50%;
  13. background:lightgreen;
  14. -webkit-animation:load1.04sease-ininfinitealternate;
  15. }
  16. @-webkit-keyframesload{
  17. 0%{
  18. opacity:1;
  19. -webkit-transform:translate(0px);
  20. }
  21. 100%{
  22. opacity:0.2;
  23. -webkit-transform:translate(150px);
  24. }
  25. }
  26. .loadingspan:nth-child(1){
  27. -webkit-animation-delay:0.13s;
  28. }
  29. .loadingspan:nth-child(2){
  30. -webkit-animation-delay:0.26s;
  31. }
  32. .loadingspan:nth-child(3){
  33. -webkit-animation-delay:0.39s;
  34. }
  35. .loadingspan:nth-child(4){
  36. -webkit-animation-delay:0.52s;
  37. }
  38. .loadingspan:nth-child(5){
  39. -webkit-animation-delay:0.65s;
  40. }

第6-8种效果：

代码如下：

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

第6-8种效果的css样式分别为：

CSS Code复制内容到剪贴板
  1. .loading{
  2. width:150px;
  3. height:15px;
  4. margin:0auto;
  5. margin-top:100px;
  6. text-align:center;
  7. }
  8. .loadingspan{
  9. display:inline-block;
  10. width:15px;
  11. height:100%;
  12. margin-right:5px;
  13. background:lightgreen;
  14. -webkit-animation:load1.04seaseinfinite;
  15. }
  16. .loadingspan:last-child{
  17. margin-right:0px;
  18. }
  19. @-webkit-keyframesload{
  20. 0%{
  21. opacity:1;
  22. }
  23. 100%{
  24. opacity:0;
  25. }
  26. }
  27. .loadingspan:nth-child(1){
  28. -webkit-animation-delay:0.13s;
  29. }
  30. .loadingspan:nth-child(2){
  31. -webkit-animation-delay:0.26s;
  32. }
  33. .loadingspan:nth-child(3){
  34. -webkit-animation-delay:0.39s;
  35. }
  36. .loadingspan:nth-child(4){
  37. -webkit-animation-delay:0.52s;
  38. }
  39. .loadingspan:nth-child(5){
  40. -webkit-animation-delay:0.65s;
  41. }

第9-10种效果：

代码如下：

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>

CSS样式分别为：

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. }

PS：CSS样式代码其实很多重复，主要就是动画不一样，但为了方便以后直接拿来用，就先不整理了。

本文链接：http://www.cnblogs.com/jr1993/p/4622039.html

到此这篇关于CSS3如何实现10种Loading效果就介绍到这了。积金遗于子孙，子孙未必能守；积书于子孙，子孙未必能读。不如积阴德于冥冥之中，此乃万世传家之宝训也。更多相关CSS3如何实现10种Loading效果内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

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