原码笔记

原码笔记

使用css3制作齿轮loading动画效果

小诸哥 0

这是一款基于css3齿轮loading动画特效,使用font-awesome字体图标的齿轮图标作为图案,通过CSS3 animation来制作三个齿轮的运动效果。感兴趣的朋友跟随小编一起看看吧

这是一款基于css3齿轮loading动画特效。该特效使用font-awesome字体图标的齿轮图标作为图案,通过CSS3 animation来制作三个齿轮的运动效果。

HTML

首先在页面中引入font-awesome文件。

<link href="

然后在放置动画的位置加上HTML结构:

  1. <div class="container">
  2.      <div class="row">
  3.          <div class="col-md-12">
  4.              <div id="loader-wrapper">
  5.                  <div id="loader1" class="fa fa-cog loader"></div>
  6.                  <div id="loader2" class="fa fa-cog loader&quot;></div>
  7.                  <div id="loader3" class="fa fa-cog loader"></div>
  8.              </div>
  9.          </div>
  10.      </div>
  11. </div>

CSS样式

然后通过下面的CSS样式来制作齿轮的动画效果。

  1. #loader-wrapper {
  2.      width: 60px;
  3.      height: 60px;
  4.      margin: auto;
  5.      position: relative;
  6. }
  7. .loader{ position: absolute; }
  8. #loader1{
  9.      color: #3A4652;
  10.      font-size: 35px;
  11.      text-align: center;
  12.      width: 35px;
  13.      height: 35px;
  14.      top: -20px;
  15.      left: 3px;
  16.      animation: animate-1 1s infinite linear;
  17. }
  18. #loader2{
  19.      color: #d72f2b;
  20.      font-size: 50px;
  21.      text-align: center;
  22.      height: 50px;
  23.      width: 50px;
  24.      right: -12px;
  25.      animation: animate-2 1s infinite linear;
  26. }
  27. #loader3{
  28.      color: #3A4652;
  29.      font-size: 35px;
  30.      text-align: center;
  31.      width: 35px;
  32.      height: 35px;
  33.      bottom: -10px;
  34.      left: 3px;
  35.      animation: animate-3 1s infinite linear;
  36. }
  37. @keyframes animate-1{
  38.      100% { transform: rotate(-180deg); }
  39. }
  40. @keyframes animate-2{
  41.      100% { transform: rotate(180deg); }
  42. }
  43. @keyframes animate-3{
  44.      100% { transform: rotate(-180deg); }
  45. }

总结

以上所述是小编给大家介绍的使用css3制作齿轮loading动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

标签: 制作齿轮 loading