当前位置：Gxlcms > css > CSS的loading动画效果使用教程

CSS的loading动画效果使用教程

时间：2021-07-01 10:21:17 帮助过：8人阅读

这次给大家带来CSS的loading动画效果使用教程，CSS的loading动画效果使用注意事项有哪些，下面就是实战案例，一起来看一下。

本文介绍了一份纯CSS loading效果代码示例，分享给大家，具体如下：

预览

代码

使用了CSS的keyframes自定义关键帧动画

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>
  4.         <title>Loading</title>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7.         <style>
  8.             p#preload {
  9.     margin: auto;
  10.     position: fixed;
  11.     width: 100%;
  12.     height: 100%;
  13.     background-color: #fff;
  14.     z-index: 9999999
  15. }
  16. p#preload>img {  
  17.     position: absolute;
  18.     top: 50%;
  19.     left: 50%;
  20.     transform: translate(-50%,-50%);
  21.     -webkit-transform: translate(-50%,-50%);
  22.     -moz-transform: translate(-50%,-50%);
  23.     -ms-transform: translate(-50%,-50%);
  24.     -o-transform: translate(-50%,-50%)
  25. }
  26. p#preload .cssload-loader {  
  27.     position: absolute;
  28.     left: 0;
  29.     right: 0;
  30.     margin: auto;
  31.     width: 62px;
  32.     height: 62px;
  33.     top: 50%;
  34.     margin-top: -31px;
  35.     border-radius: 50%;
  36.     -o-border-radius: 50%;
  37.     -ms-border-radius: 50%;
  38.     -webkit-border-radius: 50%;
  39.     -moz-border-radius: 50%;
  40.     perspective: 780px
  41. }
  42. p#preload .cssload-inner {  
  43.     position: absolute;
  44.     width: 100%;
  45.     height: 100%;
  46.     box-sizing: border-box;
  47.     -o-box-sizing: border-box;
  48.     -ms-box-sizing: border-box;
  49.     -webkit-box-sizing: border-box;
  50.     -moz-box-sizing: border-box;
  51.     border-radius: 50%;
  52.     -o-border-radius: 50%;
  53.     -ms-border-radius: 50%;
  54.     -webkit-border-radius: 50%;
  55.     -moz-border-radius: 50%
  56. }
  57. p#preload .cssload-inner.cssload-one {  
  58.     left: 0;
  59.     top: 0;
  60.     animation: cssload-rotate-one 1.15s linear infinite;
  61.     -o-animation: cssload-rotate-one 1.15s linear infinite;
  62.     -ms-animation: cssload-rotate-one 1.15s linear infinite;
  63.     -webkit-animation: cssload-rotate-one 1.15s linear infinite;
  64.     -moz-animation: cssload-rotate-one 1.15s linear infinite;
  65.     border-bottom: 3px solid #000
  66. }
  67. p#preload .cssload-inner.cssload-two {  
  68.     right: 0;
  69.     top: 0;
  70.     animation: cssload-rotate-two 1.15s linear infinite;
  71.     -o-animation: cssload-rotate-two 1.15s linear infinite;
  72.     -ms-animation: cssload-rotate-two 1.15s linear infinite;
  73.     -webkit-animation: cssload-rotate-two 1.15s linear infinite;
  74.     -moz-animation: cssload-rotate-two 1.15s linear infinite;
  75.     border-right: 3px solid #000
  76. }
  77. p#preload .cssload-inner.cssload-three {  
  78.     right: 0;
  79.     bottom: 0;
  80.     animation: cssload-rotate-three 1.15s linear infinite;
  81.     -o-animation: cssload-rotate-three 1.15s linear infinite;
  82.     -ms-animation: cssload-rotate-three 1.15s linear infinite;
  83.     -webkit-animation: cssload-rotate-three 1.15s linear infinite;
  84.     -moz-animation: cssload-rotate-three 1.15s linear infinite;
  85.     border-top: 3px solid #000
  86. }
  87. @keyframes cssload-rotate-one {
  88.     0% {
  89.         transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
  90.     }
  91.     100% {
  92.         transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  93.     }
  94. }
  95. @-o-keyframes cssload-rotate-one {
  96.     0% {
  97.         -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
  98.     }
  99.     100% {
  100.         -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  101.     }
  102. }
  103. @-ms-keyframes cssload-rotate-one {
  104.     0% {
  105.         -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
  106.     }
  107.     100% {
  108.         -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  109.     }
  110. }
  111. @-webkit-keyframes cssload-rotate-one {
  112.     0% {
  113.         -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
  114.     }
  115.     100% {
  116.         -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  117.     }
  118. }
  119. @-moz-keyframes cssload-rotate-one {
  120.     0% {
  121.         -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg)
  122.     }
  123.     100% {
  124.         -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  125.     }
  126. }
  127. @keyframes cssload-rotate-two {
  128.     0% {
  129.         transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
  130.     }
  131.     100% {
  132.         transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  133.     }
  134. }
  135. @-o-keyframes cssload-rotate-two {
  136.     0% {
  137.         -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
  138.     }
  139.     100% {
  140.         -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  141.     }
  142. }
  143. @-ms-keyframes cssload-rotate-two {
  144.     0% {
  145.         -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
  146.     }
  147.     100% {
  148.         -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  149.     }
  150. }
  151. @-webkit-keyframes cssload-rotate-two {
  152.     0% {
  153.         -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
  154.     }
  155.     100% {
  156.         -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  157.     }
  158. }
  159. @-moz-keyframes cssload-rotate-two {
  160.     0% {
  161.         -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg)
  162.     }
  163.     100% {
  164.         -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  165.     }
  166. }
  167. @keyframes cssload-rotate-three {
  168.     0% {
  169.         transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
  170.     }
  171.     100% {
  172.         transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  173.     }
  174. }
  175. @-o-keyframes cssload-rotate-three {
  176.     0% {
  177.         -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
  178.     }
  179.     100% {
  180.         -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  181.     }
  182. }
  183. @-ms-keyframes cssload-rotate-three {
  184.     0% {
  185.         -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
  186.     }
  187.     100% {
  188.         -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  189.     }
  190. }
  191. @-webkit-keyframes cssload-rotate-three {
  192.     0% {
  193.         -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
  194.     }
  195.     100% {
  196.         -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  197.     }
  198. }
  199. @-moz-keyframes cssload-rotate-three {
  200.     0% {
  201.         -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg)
  202.     }
  203.     100% {
  204.         -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  205.     }
  206. }
  207.         </style>
  208.     </head>
  209.     <body>
  210.     <p id="preload">
  211.                     <p class="cssload-loader">
  212.                 <p class="cssload-inner cssload-one"></p>
  213.                 <p class="cssload-inner cssload-two"></p>
  214.                 <p class="cssload-inner cssload-three"></p>
  215.             </p>
  216.     </p>
  217.     </body>
  218. </html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

CSS3的linear-gradient线性渐变使用方法

CSS的mask-image属性详解

以上就是CSS的loading动画效果使用教程的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！