编程 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教程(9):设置RGB颜色

Apr 02 HTML / CSS

纯CSS3实现带动画效果导航菜单无需js

Sep 27 HTML / CSS

Css3新特性应用之视觉效果实例

Dec 12 HTML / CSS

CSS3 创建网页动画实现弹跳球动效果

Oct 30 HTML / CSS

CSS3 Flex 弹性布局实例代码详解

Nov 01 HTML / CSS

详解HTML5中的标签

Jun 19 HTML / CSS

Android本地应用打开方法——通过html5写连接

Mar 11 HTML / CSS

canvas实现圆绘制的示例代码

Sep 11 HTML / CSS

AmazeUI 导航条的实现示例

Aug 14 HTML / CSS

amaze ui 的使用详细教程

Aug 19 HTML / CSS

使用css样式设计一个简单的html登陆界面的实现

Mar 30 HTML / CSS

简单实现一个手持弹幕功能+文字抖动特效

Mar 31 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中计算时间差的几种方法

2009/12/31 PHP

浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)

2013/07/05 PHP

PHP加Nginx实现动态裁剪图片方案

2014/03/10 PHP

PHP中Fatal error session_start()错误解决步骤

2014/08/05 PHP

PHP连接access数据库

2015/03/27 PHP

PHP使用内置dir类实现目录遍历删除

2015/03/31 PHP

php邮箱地址正则表达式验证

2015/11/13 PHP

SSO单点登录的PHP实现方法（Laravel框架）

2016/03/23 PHP

excel操作之Add Data to a Spreadsheet Cell

2007/06/12 Javascript

js 日期转换成中文格式的函数

2009/07/07 Javascript

在Javascript中声明时用"var"与不用"var"的区别

2013/04/15 Javascript

获取元素距离浏览器周边的位置的方法getBoundingClientRect

2013/04/17 Javascript

jQuery中size()方法用法实例

2014/12/27 Javascript

js实现屏幕自适应局部代码分享

2015/01/30 Javascript

jquery ajax结合thinkphp的getjson实现跨域的方法

2016/06/06 Javascript

AngularJS实践之使用ng-repeat中$index的注意点

2016/12/22 Javascript

JavaScript数据结构之二叉树的遍历算法示例

2017/04/13 Javascript

BootStrap Table前台和后台分页对JSON格式的要求

2017/06/28 Javascript

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

2018/09/17 Javascript

原生JS实现的自动轮播图功能详解

2018/12/28 Javascript

微信小程序顶部导航栏滑动tab效果

2019/01/28 Javascript

vue点击自增和求和的实例代码

2019/11/06 Javascript

python3.6+django2.0开发一套学员管理系统

2018/03/03 Python

Python依赖包整体迁移方法详解

2019/08/15 Python

Python解压 rar、zip、tar文件的方法

2019/11/19 Python

Django实现任意文件上传（最简单的方法）

2020/06/03 Python

浅谈Selenium+Webdriver 常用的元素定位方式

2021/01/13 Python

使用 css3 transform 属性来变换背景图的方法

2019/05/07 HTML / CSS

阿迪达斯奥地利官方商城：adidas.at

2016/10/16 全球购物

世界领先的豪华床上用品供应商之一：Bedeck Home

2019/03/18 全球购物

MediaMarkt比利时：欧洲最大电器连锁店

2020/12/21 全球购物

铭立家具面试题

2012/12/06 面试题

Linux Interview Questions For software testers

2013/05/17 面试题

高中考试作弊检讨书

2014/01/14 职场文书

《骆驼和羊》教学反思

2014/02/27 职场文书

导游词之台湾安平古堡

2019/12/25 职场文书