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


Posted in HTML / CSS onJune 05, 2014

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

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

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


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

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

HTML / CSS 相关文章推荐
CSS3实现多重边框的方法总结
May 31 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 HTML / CSS
不要在HTML中滥用div
May 08 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实现框架(一)
2006/10/09 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
PHP 图片水印类代码
2012/08/27 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
django认证系统实现自定义权限管理的方法
2019/08/28 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
商场经理竞聘演讲稿
2014/01/01 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
个人工作表现自我评价
2015/03/06 职场文书