编程 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和jquery实现可伸缩搜索框

Feb 12 HTML / CSS

一款纯css3实现的非常实用的鼠标悬停特效演示

Nov 05 HTML / CSS

CSS3中使用RGBA设置透明度的示例

Aug 04 HTML / CSS

CSS3的resize属性使用初探

Sep 27 HTML / CSS

CSS3实现swap交换动画

Jan 19 HTML / CSS

利用HTML5+CSS3实现3D转换效果实例详解

May 02 HTML / CSS

CSS3 真的会替代 SCSS 吗

Mar 09 HTML / CSS

html5 兼容IE6结构的实现代码

May 14 HTML / CSS

html5指南-4.使用Geolocation实现定位功能

Jan 07 HTML / CSS

HTML5中5个简单实用的API

Apr 28 HTML / CSS

html5响应式开发自动计算fontSize的方法

Jan 13 HTML / CSS

HTML5 body设置全屏背景图片的示例代码

Dec 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二维索引数组的遍历实例分析【2种方式】

2019/06/24 PHP

CSS心形加载的动画源码的实现

2021/03/09 HTML / CSS

教您去掉ie网页加载进度条的方法

2010/12/09 Javascript

Javascript的数组与字典用法与遍历对象的属性技巧

2012/11/07 Javascript

同域jQuery(跨)iframe操作DOM(示例代码)

2013/12/13 Javascript

JavaScript Promise启示录

2014/08/12 Javascript

JS实现控制表格内指定单元格内容对齐的方法

2015/03/30 Javascript

javascript模拟命名空间

2015/04/17 Javascript

javascript判断变量是否有值的方法

2015/04/20 Javascript

easyui取消表单实时验证,提交时统一验证的简单实例

2016/11/07 Javascript

jQuery Validate验证框架详解(推荐)

2016/12/17 Javascript

vue登录路由验证的实现

2017/12/13 Javascript

使用vue-cli编写vue插件的方法

2018/02/26 Javascript

Vue 父子组件的数据传递、修改和更新方法

2018/03/01 Javascript

教你如何用node连接redis的示例代码

2018/07/12 Javascript

Vue CLI3搭建的项目中路径相关问题的解决

2018/09/17 Javascript

[03:14]DOTA2斧王英雄基础教程

2013/11/26 DOTA

Python的词法分析与语法分析

2013/05/18 Python

以911新闻为例演示Python实现数据可视化的教程

2015/04/23 Python

使用apidocJs快速生成在线文档的实例讲解

2018/02/07 Python

Python 类的特殊成员解析

2018/06/20 Python

python实现kmp算法的实例代码

2019/04/03 Python

Django models文件模型变更错误解决

2020/05/11 Python

零基础学python应该从哪里入手

2020/08/11 Python

彪马法国官网：PUMA法国

2019/12/15 全球购物

关键字final的用法

2013/10/02 面试题

绩效专员岗位职责

2013/12/02 职场文书

护士进修自我鉴定

2014/02/07 职场文书

个人银行贷款担保书

2014/04/01 职场文书

新年团拜会主持词

2014/04/02 职场文书

计划生育标语

2014/06/23 职场文书

网络技术专业求职信

2014/07/13 职场文书

ktv好的活动方案

2014/08/15 职场文书

Python使用UDP实现720p视频传输的操作

2021/04/24 Python

JavaScript高级程序设计之基本引用类型

2021/11/17 Javascript

SQLServer RANK() 排名函数的使用

2022/03/23 SQL Server