编程 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 clip-path 用法介绍详解

Mar 01 HTML / CSS

CSS3 mask 遮罩的具体使用方法

Nov 03 HTML / CSS

纯CSS3实现漂亮的input输入框动画样式库(Text input love)

Dec 29 HTML / CSS

HTML5 用动画的表现形式装载图像

Mar 08 HTML / CSS

Html5 实现微信分享及自定义内容的流程

Aug 20 HTML / CSS

HTML中fieldset标签概述及使用方法

Feb 01 HTML / CSS

HTML5 自动聚焦(autofocus)属性使用介绍

Aug 07 HTML / CSS

HTML5 Video/Audio播放本地文件示例介绍

Nov 18 HTML / CSS

详解HTML5中的元素与元素

Aug 17 HTML / CSS

Html5原创俄罗斯方块（基于canvas）

Jan 07 HTML / CSS

canvas实现手机的手势解锁的步骤详细

Mar 16 HTML / CSS

CSS3 天气图标动画效果

Apr 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/01/30 PHP

yii框架配置默认controller和action示例

2014/04/30 PHP

PHP原生函数一定好吗？

2014/12/08 PHP

thinkPHP框架实现的无限回复评论功能示例

2018/06/09 PHP

浅谈php使用curl模拟多线程发送请求

2019/03/08 PHP

ThinkPHP3.1.2 使用cli命令行模式运行的方法

2020/04/14 PHP

jQuery 关于伪类选择符的使用说明

2013/04/24 Javascript

使用node.js半年来总结的 10 条经验

2014/08/18 Javascript

innerHTML在IE中报错解决方案

2014/12/15 Javascript

javascript动态添加删除tabs标签的方法

2015/07/06 Javascript

基于canvas实现的绚丽圆圈效果完整实例

2016/01/26 Javascript

Node.js的MongoDB驱动Mongoose基本使用教程

2016/03/01 Javascript

详解Js模板引擎（TrimPath）

2016/11/22 Javascript

微信小程序详解Page中data数据操作和函数调用

2017/01/12 Javascript

jQuery实现的分页功能示例

2017/01/22 Javascript

Angular.js实现多个checkbox只能选择一个的方法示例

2017/02/24 Javascript

JavaScript onclick事件使用方法详解

2020/05/15 Javascript

Python Web框架Pylons中使用MongoDB的例子

2013/12/03 Python

解决在pycharm中显示额外的 figure 窗口问题

2019/01/15 Python

python爬虫爬取微博评论案例详解

2019/03/27 Python

python 将字符串中的数字相加求和的实现

2019/07/18 Python

python中利用matplotlib读取灰度图的例子

2019/12/07 Python

CSS3毛玻璃效果(blur)有白边问题的解决方法

2016/11/15 HTML / CSS

详解HTML5 data-* 自定义属性

2018/01/24 HTML / CSS

Marriott中国：万豪国际酒店查询预订

2016/09/02 全球购物

世界著名的顶级牛排：Omaha Steak（奥马哈牛排）

2016/09/20 全球购物

《诺贝尔》教学反思

2014/02/17 职场文书

超市中秋节促销方案

2014/03/21 职场文书

孝敬父母的活动方案

2014/08/31 职场文书

民用住房租房协议书

2014/10/29 职场文书

钱塘江大潮导游词

2015/02/03 职场文书

2015国庆节66周年演讲稿

2015/03/20 职场文书

表扬信范文

2015/05/04 职场文书

幼儿园园长六一致辞

2015/07/31 职场文书

给numpy.array增加维度的超简单方法

2021/06/02 Python

gojs实现蚂蚁线动画效果

2022/02/18 Javascript