前言

纯css绘制齿轮加载动画。

无需使用任何图片及素材。

提示：以下是本篇文章正文内容，下面案例可供参考

一、效果图

二、步骤

1.html部分

代码如下（示例）：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>齿轮加载动画</title><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div class="container"><div class="gearbox"><div class="overlay"></div><div class="gear one"><div class="gear-inner"><div class="bar"></div><div class="bar"></div><div class="bar"></div></div></div><div class="gear two"><div class="gear-inner"><div class="bar"></div><div class="bar"></div><div class="bar"></div></div></div><div class="gear three"><div class="gear-inner"><div class="bar"></div><div class="bar"></div><div class="bar"></div></div></div><div class="gear four large"><div class="gear-inner"><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div></div></div><h1>Loading...</h1></div></body>
</html>

2.css部分

代码如下（示例）：

*{box-sizing: border-box;
}
html{height: 100%;
}
body{background: #333333;position: relative;height: 100%;margin: 0px;
}
@keyframes clockwise{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}
}
@keyframes counter-clockwise{0%{transform: rotate(0deg);}100%{transform: rotate(-360deg);}
}
.container{position: absolute;top: 50%;left: 50%;margin-left: -100px;height: 150px;width: 200px;margin-top: -75px;
}
.gearbox{background: #111111;height: 150px;width: 200px;position: relative;border: none;overflow: hidden;border-radius: 6px;box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.1);
}
.gearbox .overlay{border-radius: 6px;content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;box-shadow: inset 0px 0px 20px black;transition: background 0.2s;
}
.gearbox.turn .overlay{background: transparent;
}
.gear{position: absolute;height: 60px;width: 60px;box-shadow: 0px -1px 0px 0px #888888,0px 1px 0px 0px black;border-radius: 30px;
}
.gear.large{height: 120px;width: 120px;border-radius: 60px;
}
.gear.large:after{height: 96px;width: 96px;border-radius: 48px;margin-left: -48px;margin-top: -48px;
}
.gear.one{top: 12px;left: 10px;
}
.gear.two{top: 61px;left: 60px;
}
.gear.three{top: 110px;left: 10px;
}
.gear.four{top: 13px;left: 128px;
}
.gear:after{content: "";position: absolute;height: 36px;width: 36px;border-radius: 36px;background: #111111;top: 50%;left: 50%;margin-left: -18px;margin-top: -18px;z-index: 3;box-shadow: 0px 0px 10px rgba(255,255,255,0.1),inset 0px 0px 10px rgba(0,0,0,0.1),inset 0px 2px 0px 0px #080808,inset 0px -1px 0px 0px #888888;
}
.gear-inner{position: relative;height: 100%;width: 100%;background: #555555;animation-iteration-count: infinite;border-radius: 30px;border: 1px solid rgba(255,255,255,0.1);
}
.large .gear-inner{border-radius: 60px;
}
.gear.one .gear-inner{animation: counter-clockwise 3s infinite linear;
}
.gear.two .gear-inner{animation: counter-clockwise 3s infinite linear;
}
.gear.three .gear-inner{animation: counter-clockwise 3s infinite linear;
}
.gear.four .gear-inner{animation: counter-clockwise 3s infinite linear;
}
.gear-inner .bar{background: #555555;height: 16px;width: 76px;position: absolute;left: 50%;margin-left: -38px;top: 50%;margin-top: -8px;border-radius: 2px;border-left: 1px solid rgba(255,255,255,0.1);border-right: 1px solid rgba(255,255,255,0.1);
}
.large .gear-inner .bar{margin-left: -68px;width: 136px;
}
.gear-inner .bar:nth-child(2){transform: rotate(60deg);
}
.gear-inner .bar:nth-child(3){transform: rotate(120deg);
}
.gear-inner .bar:nth-child(4){transform: rotate(90deg);
}
.gear-inner .bar:nth-child(5){transform: rotate(30deg);
}
.gear-inner .bar:nth-child(6){transform: rotate(150deg);
}
h1{font-family: "Helvetica";text-align: center;text-transform: uppercase;color: #888888;font-size: 19px;padding-top: 10px;text-shadow: 3px 3px 0px #111111;
}

纯css绘制齿轮加载动画相关推荐

css 加载图片,纯CSS图片预加载
译自:[Creating a CSS Image Preloader](http://www.devirtuoso.com/2009/07/creating-a-css-image-preloader ...
直播app系统源码通过CSS液体实现加载动画
直播app系统源码通过CSS液体实现加载动画首先我们要让元素能够旋转起来,可以使用transform中的rotate进行2D的360deg旋转. 紧接着我们可以通过CSS变量(–开头的形式)结合an ...
加载html动画logo,仅CSS实现的加载动画 – Loader.css
仅CSS实现的加载动画 – Loader.css 4月 13, 2015 评论 (6) Sponsor 当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loadi ...
CSS - 实现Loading加载动画
Loading加载动画用CSS都用实现一个loading的加载动画通过控制 item-loader-container 来实现显示及隐藏 <div class="item-load ...
Nuxtjs上使用wow.js+animate.css实现滚动加载动画
最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要"动"起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满 ...
「HTML+CSS」--自定义加载动画【027】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算机 ...
wow.js+animate.css实现滚动加载动画
迅雷官网有这种效果: 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业,公司成立于2003年,基于深耕十几年.获得国际专利的P2SP下载加速技术优势,面向个人用户和企业用户打造了丰富的下 ...
「HTML+CSS」--自定义加载动画【047】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算机 ...
css+伪类+加载动画,CSS3 optional伪类兼容实现加载中loading效果 » 张鑫旭-鑫空间-鑫生活...
CSS代码: /* 无限旋转哔哔哔->奥特曼 */ .spin { -webkit-transform: rotate(360deg); -webkit-animation: spin 1s ...

纯css绘制齿轮加载动画

前言

一、效果图

二、步骤

1.html部分

2.css部分

纯css绘制齿轮加载动画相关推荐

最新文章

热门文章