编程 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中的transform属性进行2D和3D变换的基本用法

May 12 HTML / CSS

css3类选择器之结合元素选择器和多类选择器用法

Mar 09 HTML / CSS

如何使用localstorage代替cookie实现跨域共享数据问题

Apr 18 HTML / CSS

详解如何用canvas画一个微笑的表情

Mar 14 HTML / CSS

html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)

Jan 06 HTML / CSS

HTML5和以前HTML4的区别整理

Oct 20 HTML / CSS

移动端解决悬浮层（悬浮header、footer）会遮挡住内容的3种方法

Mar 27 HTML / CSS

html5+css3进度条倒计时动画特效代码【推荐】

Mar 08 HTML / CSS

HTML5 Canvas玩转酷炫大波浪进度图效果实例（附demo）

Dec 14 HTML / CSS

基于HTML5+Webkit实现树叶飘落动画

Dec 28 HTML / CSS

使用canvas压缩图片上传的方法示例

Feb 07 HTML / CSS

html+css实现文字折叠特效实例

Jun 02 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 无限级 SelectTree 类

2009/05/19 PHP

php 文件上传代码(限制jpg文件)

2010/01/05 PHP

windows中为php安装mongodb与memcache

2015/01/06 PHP

PHP中imagick函数的中文解释

2015/01/21 PHP

innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别

2007/06/29 Javascript

学习ExtJS table布局

2009/10/08 Javascript

javascript OFFICE控件测试代码

2009/12/08 Javascript

js 居中漂浮广告

2010/03/21 Javascript

锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）

2010/03/24 Javascript

javascript验证只能输入数字和一个小数点示例

2013/10/21 Javascript

javascript阻止scroll事件多次执行的思路及实现

2013/11/08 Javascript

使用jQuery实现验证上传图片的格式与大小

2014/12/03 Javascript

轻松创建nodejs服务器（2）：nodejs服务器的构成分析

2014/12/18 NodeJs

使用jquery动态加载js文件的方法

2014/12/24 Javascript

javascript文本框内输入文字倒计数的方法

2015/02/24 Javascript

深入分析Cookie的安全性问题

2015/03/01 Javascript

jQuery实现页面内锚点平滑跳转特效的方法总结

2015/05/11 Javascript

js实现跨域的4种实用方法原理分析

2015/10/29 Javascript

基于JavaScript如何制作遮罩层对话框

2016/01/26 Javascript

Javascript中prototype的使用详解

2016/06/18 Javascript

angular4实现tab栏切换的方法示例

2017/10/21 Javascript

使用use注册Vue全局组件和全局指令的方法

2018/03/08 Javascript

Angular4集成ng2-file-upload的上传组件

2018/03/14 Javascript

从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法

2018/09/18 Javascript

javascript设计模式 ? 原型模式原理与应用实例分析

2020/04/10 Javascript

vue如何使用外部特殊字体的操作

2020/07/30 Javascript

Python实现判断一个字符串是否包含子串的方法总结

2017/11/21 Python

Django实现基于类的分页功能

2019/10/31 Python

Tensorflow 实现分批量读取数据

2020/01/04 Python

GUESS西班牙官方网上商城：美国服饰品牌

2017/03/15 全球购物

介绍一下Make? 为什么使用make

2013/12/08 面试题

广告学专业毕业生自荐信

2013/09/24 职场文书

十佳好少年事迹材料

2014/08/21 职场文书

大学生求职信怎么写

2015/03/19 职场文书

导游词之湖北梁子湖

2019/11/07 职场文书

CSS极坐标的实例代码

2021/06/03 HTML / CSS