编程 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 三维变形实现立体方块特效源码

Dec 15 HTML / CSS

彻底弄明白CSS3的Media Queries(跨平台设计)

Jul 27 HTML / CSS

分享CSS3中必须要知道的10个顶级命令

Apr 26 HTML / CSS

CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)

Jun 03 HTML / CSS

CSS3实现滚动条动画效果代码分享

Aug 03 HTML / CSS

html5适合移动应用开发的12大特性

Mar 19 HTML / CSS

HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例

Jun 16 HTML / CSS

使用纯HTML5编写一款网页上的时钟的代码分享

Nov 16 HTML / CSS

详解Html5页面实现下载文件（apk、txt等）的三种方式

Oct 22 HTML / CSS

canvas绘制太极图的实现示例

Apr 29 HTML / CSS

使用CSS实现小三角边框原理解析

Nov 07 HTML / CSS

CSS巧用渐变实现高级感背景光动画

Dec 06 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通过字符串调用函数示例

2014/03/02 PHP

关于PHP中Session文件过多的问题及session文件保存位置

2016/03/17 PHP

PHP实现电商订单自动确认收货redis队列

2017/05/17 PHP

几行代码轻松搞定jquery实现flash8类似的连接效果

2007/05/03 Javascript

javascript 日历提醒系统( 兼容所有浏览器 )

2009/04/07 Javascript

基于jquery的自定义鼠标提示效果 jquery.toolTip

2010/11/14 Javascript

调用DOM对象的focus使文本框获得焦点

2014/02/19 Javascript

jQuery获取及设置表单input各种类型值的方法小结

2016/05/24 Javascript

Angularjs中controller的三种写法分享

2016/09/21 Javascript

浅谈jquery之on()绑定事件和off()解除绑定事件

2016/10/26 Javascript

jQuery与JavaScript节点创建方法的对比

2016/11/18 Javascript

jQuery弹出窗口打开链接的实现代码

2016/12/24 Javascript

微信小程序 wx:for的使用实例详解

2017/04/27 Javascript

Bootstrap实现翻页效果

2017/11/27 Javascript

基于jquery trigger函数无法触发a标签的两种解决方法

2018/01/06 jQuery

JavaScript分步实现一个出生日期的正则表达式

2018/03/22 Javascript

JavaScript中 ES6变量的结构赋值

2018/07/10 Javascript

Vue常见面试题整理【值得收藏】

2018/09/20 Javascript

js计算最大公约数和最小公倍数代码实例

2019/09/11 Javascript

Vue2.X和Vue3.0数据响应原理变化的区别

2019/11/07 Javascript

JS将指定的某个字符全部转换为其他字符实例代码

2020/10/13 Javascript

[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场

2018/04/06 DOTA

[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16

2018/08/17 DOTA

Python的Flask框架应用调用Redis队列数据的方法

2016/06/06 Python

Python 正则表达式实现计算器功能

2017/04/29 Python

浅谈python中copy和deepcopy中的区别

2017/10/23 Python

Python排序算法之选择排序定义与用法示例

2018/04/29 Python

Python抓包程序mitmproxy安装和使用过程图解

2020/03/02 Python

Python闭包装饰器使用方法汇总

2020/06/29 Python

HTML5实现视频直播功能思路详解

2017/11/16 HTML / CSS

html5+css3实现一款注册表单实例

2013/04/17 HTML / CSS

美国著名手表网站：Timepiece

2017/11/15 全球购物

2014年开学第一课活动方案

2014/03/06 职场文书

创作书写之导游词实用技巧分享（干货）

2019/12/20 职场文书

windows server2016安装oracle 11g的图文教程

2022/07/15 Servers

MySQL深分页问题解决思路

2022/12/24 MySQL