纯 CSS3 做出炫酷的圆形加载动画

分类 文章 434阅读阅读模式

动画是用 CSS3 做出来的，jQuery 的作用仅是用于当页面加载完毕后，隐藏加载动画。

1、HTML部分

添加到 body 标签的下方（可以是任意地方）

  1. <div id="circle-out"></div><div id="circle-in"></div>

 

2、CSS 部分，

  1. #circle-out {
  2. background-color: rgba(0, 0, 0, 0);
  3. border: 5px solid rgba(19, 160, 178, 0.85);
  4. opacity: .9;
  5. border-right: 5px solid rgba(0, 0, 0, 0);
  6. border-left: 5px solid rgba(0, 0, 0, 0);
  7. border-radius: 100%;
  8. -webkit-box-shadow: 0 0 35px rgba(19, 160, 178, 0.99);
  9. box-shadow: 0 0 35px rgba(19, 160, 178, 0.99);
  10. width: 66px;
  11. height: 66px;
  12. margin: 0 auto;
  13. position: fixed;
  14. left: 33px;
  15. bottom: 33px;
  16. -webkit-animation: circlecircle-out 1s infinite linear;
  17. animation: circlecircle-out 1s infinite linear;
  18. }
  19. #circle-in {
  20. background-color: rgba(0, 0, 0, 0);
  21. border: 5px solid rgba(19, 160, 178, 0.85);
  22. opacity: .9;
  23. border-left: 5px solid rgba(0, 0, 0, 0);
  24. border-right: 5px solid rgba(0, 0, 0, 0);
  25. border-radius: 100%;
  26. -webkit-box-shadow: 0 0 15px rgba(19, 160, 178, 0.99);
  27. box-shadow: 0 0 15px rgba(19, 160, 178, 0.99);
  28. width: 33px;
  29. height: 33px;
  30. margin: 0 auto;
  31. position: fixed;
  32. left: 50px;
  33. bottom: 50px;
  34. -webkit-animation: circlecircle-in 1s infinite linear;
  35. animation: circlecircle-in 1s infinite linear;
  36. }
  37. @-webkit-keyframes circlecircle-out {
  38. 0% {
  39. -webkit-transform: rotaterotate(160deg);
  40. opacity: 0;
  41. -webkit-box-shadow: 0 0 1px rgba(19, 160, 178, 0.99);
  42. box-shadow: 0 0 1px rgba(19, 160, 178, 0.99);
  43. }
  44. 50% {
  45. -webkit-transform: rotaterotate(145deg);
  46. opacity: 1;
  47. }
  48. 100% {
  49. -webkit-transform: rotaterotate(-320deg);
  50. opacity: 0;
  51. }
  52. }
  53. @keyframes circlecircle-out {
  54. 0% {
  55. -webkit-transform: rotaterotate(160deg);
  56. transform: rotaterotate(160deg);
  57. opacity: 0;
  58. -webkit-box-shadow: 0 0 1px rgba(19, 160, 178, 0.99);
  59. box-shadow: 0 0 1px rgba(19, 160, 178, 0.99);
  60. }
  61. 50% {
  62. -webkit-transform: rotaterotate(145deg);
  63. transform: rotaterotate(145deg);
  64. opacity: 1;
  65. }
  66. 100% {
  67. -webkit-transform: rotaterotate(-320deg);
  68. transform: rotaterotate(-320deg);
  69. opacity: 0;
  70. }
  71. }
  72. @-webkit-keyframes circlecircle-in {
  73. 0% {
  74. -webkit-transform: rotaterotate(0deg);
  75. }
  76. 100% {
  77. -webkit-transform: rotaterotate(360deg);
  78. }
  79. }
  80. @keyframes circlecircle-in {
  81. 0% {
  82. -webkit-transform: rotaterotate(0deg);
  83. transform: rotaterotate(0deg);
  84. }
  85. 100% {
  86. -webkit-transform: rotaterotate(360deg);
  87. transform: rotaterotate(360deg);
  88. }
  89. }

 

效果已经有了，查看 Demo 效果，但会发现，这动画一直在转，不符合要求啊。

加载嘛，加载完就该干嘛干嘛去对吧，所以还需要用到jQuery来达到加载完毕后隐藏该动画的效果。

 

1、首先引入 jQuery

  1. <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

2、添加 JS

  1. $(window).load(function() {
  2. $("#circle-out").fadeOut(500);
  3. $("#circle-in").fadeOut(700);
  4. });

 

代码的大概意思就是，当加载完毕后，就以 700 毫秒的过渡时间来逐渐隐藏当前动画。

如果不想用 jQuery 想直接用 JavaScript 来写的话。

2.1、JavaScript 写法：

  1. window.onload=function(){
  2. document.getElementById('circle-out').style.display="none";
  3. document.getElementById('circle-in').style.display="none";
  4. }

 

这个是最简单的写法，但是会发现有点奇怪，就是当页面加载完毕后，动画突然就消失，这消失的有点尴尬。

如果想要丰富的效果，建议给予这个加载动画添加一个类名，然后对这个类进行一系列的操作。

完毕！

共 2531字 © 本文由 大朗 撰写，转载请注明出处。

本文由大朗编写，如有错漏或其他不当，请在下方留言，欢迎指正。

永久固定短链接地址：https://www.darlang.com/?p=66 复制链接

赞 0

相关文章

给我留言

  • 有人回复时邮件通知我
© 2019 DarLang.com 粤ICP备15047962号 粤公网安备 44010602006221号 Powered by DarLang