编程 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 网页下拉菜单代码解释中文翻译

Feb 27 HTML / CSS

浅谈CSS3 box-sizing 属性有趣的盒模型

Apr 02 HTML / CSS

css3实现六边形边框的实例代码

May 24 HTML / CSS

CSS3 中filter（滤镜）属性使用详解

Apr 07 HTML / CSS

详解canvas drawImage()方法绘制图片不显示的问题

Oct 08 HTML / CSS

html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点

Jan 09 HTML / CSS

HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用

Jan 30 HTML / CSS

VSCode 自定义html5模板的实现

Dec 05 HTML / CSS

html5自动播放mov格式视频的实例代码

Jan 14 HTML / CSS

关于解决iframe标签嵌套问题的解决方法

Mar 04 HTML / CSS

flex弹性布局详解

Mar 20 HTML / CSS

css如何把元素固定在容器底部的四种方式

Jun 16 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面向对象字段的声明与使用

2012/06/14 PHP

php float不四舍五入截取浮点型字符串方法总结

2013/10/28 PHP

解决tp5在nginx下修改配置访问的问题

2019/10/16 PHP

javascript数组使用调用方法汇总

2007/12/08 Javascript

javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系

2010/02/04 Javascript

33个优秀的jQuery 教程分享(幻灯片、动画菜单)

2011/07/08 Javascript

javascript读写json示例

2014/04/11 Javascript

jQuery学习笔记之 Ajax操作篇（三） - 过程处理

2014/06/23 Javascript

jQuery遍历页面所有CheckBox查看是否被选中的方法

2015/04/14 Javascript

分享经典的JavaScript开发技巧

2015/11/21 Javascript

JavaScript实现相册弹窗功能（zepto.js)

2016/06/21 Javascript

JavaScript之面向对象_动力节点Java学院整理

2017/06/29 Javascript

微信小程序显示下拉列表功能【附源码下载】

2017/12/12 Javascript

移动web开发之touch事件实例详解

2018/01/17 Javascript

jQuery实现的回车触发按钮事件功能示例

2018/03/25 jQuery

this.$toast() 了解一下？

2019/04/18 Javascript

微信小程序template模板与component组件的区别和使用详解

2019/05/22 Javascript

js中addEventListener()与removeEventListener()用法案例分析

2020/03/02 Javascript

python实现马耳可夫链算法实例分析

2015/05/20 Python

Python循环语句之break与continue的用法

2015/10/14 Python

分享8个非常流行的 Python 可视化工具包

2019/06/05 Python

Python matplotlib生成图片背景透明的示例代码

2019/08/30 Python

浅谈keras中的目标函数和优化函数MSE用法

2020/06/10 Python

python 制作磁力搜索工具

2021/03/04 Python

浅谈amaze-ui中datepicker和datetimepicker注意的几点

2020/08/21 HTML / CSS

德国网上花店：Valentins

2018/08/15 全球购物

台湾家适得：Homeget

2019/02/11 全球购物

Seavenger官网：潜水服、浮潜、靴子和袜子

2020/03/05 全球购物

介绍一下HTTP、HTTPS和SSL

2012/12/16 面试题

高中毕业自我鉴定

2013/12/19 职场文书

法学毕业生自我鉴定

2014/01/31 职场文书

高中毕业生的个人自我评价

2014/02/21 职场文书

群众路线剖析材料范文

2014/10/09 职场文书

python实现简单石头剪刀布游戏

2021/10/24 Python

python turtle绘制多边形和跳跃和改变速度特效

2022/03/16 Python

Elasticsearch 数据类型及管理

2022/04/19 Python