编程 HTML / CSS

纯CSS3实现滚动的齿轮动画效果

Posted in HTML / CSS onJune 05, 2014

纯CSS写的齿轮效果。支持chrome，firefox，比较粗糙。各位见谅，希望你能看到的是思想，而不是技术的东西。

效果预览：
纯CSS3实现滚动的齿轮动画效果

原理的话也比较简单，主要是css3画圆，然后弄出几个轮子的齿（这里构建锯齿的方法是我个人比较满意的地方，就是用一个贯穿整个圆形的长条，然后transform:rotate一定的度数，然后按照规律写下去，一个轮子就出来了。如果结合js做的话，能做到更多更精细的效果），然后画出两个轮子。用keyframes(关键帧)给出动画效果。一个顺时针一个逆时针，设置好滚动时间，并无限滚动（infinite）。ok，告一段落。看下面效果:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>齿轮</title><style>html,body{margin:0;padding:0;width:100%;}#wrap{margin:0;padding:150px;}.post{width:100px;height:100px;background:#0099ff;border-radius:200px;display:block;position:relative;}.post span{width:126px;height:16px;display:inline-block;background:#0099ff;position:absolute;top:42px;left:-13px;border-radius:5px;}.s1{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);}.s2{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);}.s3{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);}.s4{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);}.s5{-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg);}.s6{-webkit-transform:rotate(150deg);-moz-transform:rotate(150deg);}.y1{width:60px;height:60px;left:80px;top:0px;}.y1 span{width:88px;height:8px;display:inline-block;background:#0099ff;position:absolute;top:26px;left:-14px;border-radius:8px;}.y0{-webkit-animation-name:slide1;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:slide1;-moz-animation-duration:10s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;}@-webkit-keyframes slide1{ 0%{-webkit-transform:rotate(0deg);} 50%{-webkit-transform:rotate(180deg);} 100%{-webkit-transform:rotate(360deg);}}@-moz-keyframes slide1{ 0%{-moz-transform:rotate(0deg);} 50%{-moz-transform:rotate(180deg);} 100%{-moz-transform:rotate(360deg);}}.y1{-webkit-animation-name:slide2;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:slide2;-moz-animation-duration:10s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;}@-webkit-keyframes slide2{ 0%{-webkit-transform:rotate(0deg);} 50%{-webkit-transform:rotate(-180deg);} 100%{-webkit-transform:rotate(-360deg);}}@-moz-keyframes slide2{ 0%{-moz-transform:rotate(0deg);} 50%{-moz-transform:rotate(-180deg);} 100%{-moz-transform:rotate(-360deg);}}</style></head><body><div id="wrap"> <div class="post y0">  <span class="s1"></span>  <span class="s2"></span>  <span class="s3"></span>  <span class="s4"></span>  <span class="s5"></span>  <span class="s6"></span> </div> <div class="post y1">  <span class="s1"></span>  <span class="s2"></span>  <span class="s3"></span>  <span class="s4"></span>  <span class="s5"></span>  <span class="s6"></span> </div></div></body></html>

提示：您可以先修改部分代码再运行

主要用到了transform进行旋转，keyframes关键帧效果。本来打算写个复杂的联动齿轮的，不过实在是懒得折腾了。哪位童鞋写好后在这里吱一声吧。。。

纯CSS3实现滚动的齿轮动画效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

详解Css3新特性应用之过渡与动画

Jan 10 HTML / CSS

CSS3之边框多颜色Border-color属性使用示例

Oct 11 HTML / CSS

css3中检验表单的required,focus,valid和invalid样式

Feb 21 HTML / CSS

纯css3实现的鼠标悬停动画按钮

Dec 23 HTML / CSS

CSS3实现伪类hover离开时平滑过渡效果示例

Aug 10 HTML / CSS

HTML5 File API改善网页上传功能

Aug 19 HTML / CSS

HTML5的表单(绝对特别强大的功能)使用示例

Jun 20 HTML / CSS

html5使用canvas绘制文字特效

Dec 15 HTML / CSS

HTML5实现多张图片上传功能

Mar 11 HTML / CSS

html5 实现客户端验证上传文件的大小(简单实例)

May 15 HTML / CSS

HTML5 虚拟键盘出现挡住输入框的解决办法

Feb 14 HTML / CSS

使用phonegap获取位置信息的实现方法

Mar 31 HTML / CSS

浅析几个CSS3常用功能的写法

Jun 05 #HTML / CSS

CSS3中利用animation属性创建雪花飘落特效

May 14 #HTML / CSS

CSS3感应鼠标的背景闪烁和图片缩放动画效果

May 14 #HTML / CSS

css3 自定义字体font-face使用介绍

May 14 #HTML / CSS

CSS3动画animation实现云彩向左滚动

May 09 #HTML / CSS

css3实现可滑动跳转的分页插件示例

May 08 #HTML / CSS

CSS3 Media Queries详细介绍和使用实例

May 08 #HTML / CSS

You might like

PHP面向对象之旅:深入理解static变量与方法

2014/01/06 PHP

php中mysql连接和基本操作代码（快速测试使用，简单方便）

2014/04/25 PHP

ThinkPHP表单自动提交验证实例教程

2014/07/18 PHP

php实现无限级分类

2014/12/24 PHP

thinkPHP模型初始化实例分析

2015/12/03 PHP

分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html

2015/12/09 PHP

基于jquery的复制网页内容到WORD的实现代码

2011/02/16 Javascript

JS模拟面向对象全解（二、类型与赋值）

2011/07/13 Javascript

在JavaScript的正则表达式中使用exec()方法

2015/06/16 Javascript

jQuery+Ajax实现无刷新操作

2016/01/04 Javascript

Vue2实现组件props双向绑定

2016/12/02 Javascript

原生js编写2048小游戏

2017/03/17 Javascript

Electron中实现大文件上传和断点续传功能

2018/10/28 Javascript

js中位运算的运用实例分析

2018/12/11 Javascript

vue实现倒计时获取验证码效果

2020/04/17 Javascript

js实现Element中input组件的部分功能并封装成组件(实例代码)

2021/03/02 Javascript

python的keyword模块用法实例分析

2015/06/30 Python

python魔法方法-自定义序列详解

2016/07/21 Python

python的构建工具setup.py的方法使用示例

2017/10/23 Python

pandas数据预处理之dataframe的groupby操作方法

2018/04/13 Python

python3使用smtplib实现发送邮件功能

2018/05/22 Python

Python3模拟curl发送post请求操作示例

2019/05/03 Python

python基于event实现线程间通信控制

2020/01/13 Python

基于Python的OCR实现示例

2020/04/03 Python

Python坐标轴操作及设置代码实例

2020/06/04 Python

Python3爬虫里关于识别微博宫格验证码的知识点详解

2020/07/30 Python

使用tensorflow进行音乐类型的分类

2020/08/14 Python

新西兰廉价汽车租赁：Snap Rentals

2018/09/14 全球购物

科室工作的个人自我评价

2013/10/30 职场文书

爷爷追悼会答谢词

2014/01/24 职场文书

小学体育教学反思

2014/01/31 职场文书

抄作业检讨书

2014/02/17 职场文书

买房委托公证书

2014/04/08 职场文书

遗嘱继承权公证书

2015/01/26 职场文书

2015年新学期寄语

2015/02/26 职场文书

拯救大兵瑞恩观后感

2015/06/09 职场文书