编程 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实现多重边框的方法总结

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 职场文书