经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
CSS3 实现的加载动画_css3_CSS
来源：jb51　　时间：2020/12/8 9:19:33　　对本文有异议

实现效果

实现代码

  1. <h1>w3xue</h1>
  2. <h3>JB51.net</h3>
  3.  
  4. <div class='loader loader1'>
  5.   <div>
  6.     <div>
  7.       <div>
  8.         <div>
  9.           <div>
  10.             <div></div>
  11.           </div>
  12.         </div>
  13.       </div>
  14.     </div>
  15.   </div>
  16. </div>
  17.  
  18. <div class='loader loader2'>
  19.   <div>
  20.     <div>
  21.       <div>
  22.         <div>
  23.           <div>
  24.             <div>
  25.             </div>
  26.           </div>
  27.         </div>
  28.       </div>
  29.     </div>
  30.   </div>
  31. </div>
  32.  
  33. <div class='loader loader3'>
  34.   <div>
  35.     <div>
  36.       <div>
  37.         <div>
  38.           <div>
  39.             <div></div>
  40.           </div>
  41.         </div>
  42.       </div>
  43.     </div>
  44.   </div>
  45. </div>
  46.  
  47. <div class='loader loader4'>
  48.   <div>
  49.     <div>
  50.       <div>
  51.         <div>
  52.           <div>
  53.             <div>
  54.               <div>
  55.                 <div>
  56.                   <div>
  57.                     <div></div>
  58.                   </div>
  59.                 </div>
  60.               </div>
  61.             </div>
  62.           </div>
  63.         </div>
  64.       </div>
  65.     </div>
  66.   </div>
  67. </div>

CSS3

  1. @-webkit-keyframes rotate {
  2.   0% {
  3.     -webkit-transform: rotate(0deg);
  4.             transform: rotate(0deg);
  5.   }
  6.   50% {
  7.     -webkit-transform: rotate(180deg);
  8.             transform: rotate(180deg);
  9.   }
  10.   100% {
  11.     -webkit-transform: rotate(360deg);
  12.             transform: rotate(360deg);
  13.   }
  14. }
  15. @keyframes rotate {
  16.   0% {
  17.     -webkit-transform: rotate(0deg);
  18.             transform: rotate(0deg);
  19.   }
  20.   50% {
  21.     -webkit-transform: rotate(180deg);
  22.             transform: rotate(180deg);
  23.   }
  24.   100% {
  25.     -webkit-transform: rotate(360deg);
  26.             transform: rotate(360deg);
  27.   }
  28. }
  29. @-webkit-keyframes rotate2 {
  30.   0% {
  31.     -webkit-transform: rotate(0deg);
  32.             transform: rotate(0deg);
  33.     border-top-color: rgba(0, 0, 0, 0.5);
  34.   }
  35.   50% {
  36.     -webkit-transform: rotate(180deg);
  37.             transform: rotate(180deg);
  38.     border-top-color: rgba(0, 0, 255, 0.5);
  39.   }
  40.   100% {
  41.     -webkit-transform: rotate(360deg);
  42.             transform: rotate(360deg);
  43.     border-top-color: rgba(0, 0, 0, 0.5);
  44.   }
  45. }
  46. @keyframes rotate2 {
  47.   0% {
  48.     -webkit-transform: rotate(0deg);
  49.             transform: rotate(0deg);
  50.     border-top-color: rgba(0, 0, 0, 0.5);
  51.   }
  52.   50% {
  53.     -webkit-transform: rotate(180deg);
  54.             transform: rotate(180deg);
  55.     border-top-color: rgba(0, 0, 255, 0.5);
  56.   }
  57.   100% {
  58.     -webkit-transform: rotate(360deg);
  59.             transform: rotate(360deg);
  60.     border-top-color: rgba(0, 0, 0, 0.5);
  61.   }
  62. }
  63. * {
  64.   box-sizing: border-box;
  65. }
  66.  
  67. body {
  68.   background: #f9f9f9;
  69.   padding-bottom: 100px;
  70. }
  71.  
  72. h1, h3 {
  73.   display: block;
  74.   margin: 0px auto;
  75.   text-align: center;
  76.   font-family: 'Tahoma';
  77.   font-weight: lighter;
  78.   color: rgba(0, 0, 0, 0.5);
  79.   letter-spacing: 1.5px;
  80. }
  81.  
  82. h1 {
  83.   margin: 50px auto;
  84. }
  85.  
  86. .loader {
  87.   position: relative;
  88.   margin: 75px auto;
  89.   width: 150px;
  90.   height: 150px;
  91.   display: block;
  92.   overflow: hidden;
  93. }
  94. .loader div {
  95.   height: 100%;
  96. }
  97.  
  98. /* loader 1 */
  99. .loader1, .loader1 div {
  100.   border-radius: 50%;
  101.   padding: 8px;
  102.   border: 2px solid transparent;
  103.   -webkit-animation: rotate linear 3.5s infinite;
  104.           animation: rotate linear 3.5s infinite;
  105.   border-top-color: rgba(0, 0, 0, 0.5);
  106.   border-bottom-color: rgba(0, 0, 255, 0.5);
  107. }
  108.  
  109. /*loader 2  */
  110. .loader2, .loader2 div {
  111.   border-radius: 50%;
  112.   padding: 8px;
  113.   border: 2px solid transparent;
  114.   -webkit-animation: rotate linear 3.5s infinite;
  115.           animation: rotate linear 3.5s infinite;
  116.   border-top-color: rgba(0, 0, 255, 0.5);
  117.   border-left-color: rgba(0, 0, 0, 0.5);
  118.   border-right-color: rgba(0, 0, 0, 0.5);
  119. }
  120.  
  121. /*loader 3  */
  122. .loader3, .loader3 div {
  123.   border-radius: 50%;
  124.   padding: 8px;
  125.   border: 2px solid transparent;
  126.   -webkit-animation: rotate linear 3.5s infinite;
  127.           animation: rotate linear 3.5s infinite;
  128.   border-top-color: rgba(0, 0, 0, 0.5);
  129.   border-left-color: rgba(0, 0, 255, 0.5);
  130.   -webkit-animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
  131.           animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
  132.   -webkit-animation-duration: 3s;
  133.           animation-duration: 3s;
  134. }
  135.  
  136. /* loader 4 */
  137. .loader4, .loader4 div {
  138.   border-radius: 50%;
  139.   padding: 8px;
  140.   border: 2px solid transparent;
  141.   -webkit-animation: rotate linear 3.5s infinite;
  142.           animation: rotate linear 3.5s infinite;
  143.   border-radius: 50%;
  144.   padding: 4px;
  145.   -webkit-animation: rotate2 4s infinite linear;
  146.           animation: rotate2 4s infinite linear;
  147. }
  148.  
  149. div:hover {
  150.   -webkit-animation-play-state: paused;
  151.           animation-play-state: paused;
  152. }
  153.  
  154. .loader, .loader * {
  155.   will-change: transform;
  156. }

以上就是CSS3 实现的加载动画的详细内容，更多关于CSS3 加载动画的资料请关注w3xue其它相关文章！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号