CSS齿轮旋转的loading加载动画

一款CSS齿轮旋转的loading加载动画，跟其他的加载特效相比，这个还是比较特别的，不同颜色的齿轮在循环旋转中，另外有一个中空的白色圆圈的遮罩效果，整体的感觉还时挺棒的，喜欢的童鞋请收下吧。

分类：html/css > 图形难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，仅需要引入一个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，3个不同颜色的齿轮分别放入不同的div里面，再配上标题的说明文字，代码如下：

<div class='loader'>
  <div class='loader_overlay'></div>
  <div class='loader_cogs'>
    <div class='loader_cogs__top'>
      <div class='top_part'></div>
      <div class='top_part'></div>
      <div class='top_part'></div>
      <div class='top_hole'></div>
    </div>
    <div class='loader_cogs__left'>
      <div class='left_part'></div>
      <div class='left_part'></div>
      <div class='left_part'></div>
      <div class='left_hole'></div>
    </div>
    <div class='loader_cogs__bottom'>
      <div class='bottom_part'></div>
      <div class='bottom_part'></div>
      <div class='bottom_part'></div>
      <div class='bottom_hole'></div>
    </div>
    <p>加载中...</p>
  </div>
  <h1>齿轮旋转的loading加载</h1>
  <h2>纯CSS动画效果</h2>
</div>