编程 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 border-radius属性详解

Jul 05 HTML / CSS

CSS3教程(3):border-color网页边框色彩

Apr 02 HTML / CSS

CSS3之2D与3D变换的实现方法

Jan 28 HTML / CSS

深入浅析CSS3中的Flex布局整理

Apr 27 HTML / CSS

html5 touch事件实现触屏页面上下滑动(二)

Mar 10 HTML / CSS

Html5 Canvas 实现一个“刮刮乐”游戏

Sep 05 HTML / CSS

解决Firefox下不支持outerHTML问题代码分享

Jun 04 HTML / CSS

H5新属性audio音频和video视频的控制详解（推荐）

Dec 09 HTML / CSS

详解px单位html5响应式方案

Mar 08 HTML / CSS

canvas实现二维码和图片合成的示例代码

Aug 01 HTML / CSS

css position fixed 左右双定位的实现代码

Apr 29 HTML / CSS

详解CSS中的特指度和层叠问题

Jul 15 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

3.从实例开始

2006/10/09 PHP

基于PHP实现用户注册登录功能

2016/10/14 PHP

最佳的addEvent事件绑定是怎样诞生的

2011/10/24 Javascript

简单实例处理url特殊符号&处理(2种方法)

2013/04/02 Javascript

IE8下String的Trim()方法失效的解决方法

2013/11/08 Javascript

jquery遍历之parent()和parents()的区别及parentsUntil()方法详解

2013/12/02 Javascript

js判断游览器类型及版本号的代码

2014/05/11 Javascript

JavaScript判断textarea值是否为空并给出相应提示

2014/09/04 Javascript

node.js读取文件到字符串的方法

2015/06/29 Javascript

javascript如何实现暂停功能

2015/11/06 Javascript

angular2使用简单介绍

2016/03/01 Javascript

jQuery技巧之让任何组件都支持类似DOM的事件管理

2016/04/05 Javascript

Bootstrap.css与layDate日期选择样式起冲突的解决办法

2017/04/07 Javascript

关于javascript获取内联样式与嵌入式样式的实例

2017/06/01 Javascript

详解基于 Nuxt 的 Vue.js 服务端渲染实践

2017/10/24 Javascript

纯JavaScript实现实时反馈系统时间

2017/10/26 Javascript

vue配置多页面的实现方法

2018/05/22 Javascript

快速解决处理后台返回json数据格式的问题

2018/08/07 Javascript

vue学习笔记五：在vue项目里面使用引入公共方法详解

2019/04/04 Javascript

谈谈IntersectionObserver懒加载的具体使用

2019/10/15 Javascript

js实现轮播图效果 z-index实现轮播图

2020/01/17 Javascript

JS+Canvas实现五子棋游戏

2020/08/26 Javascript

小程序角标的添加及绑定购物车数量进行实时更新的实现代码

2020/12/07 Javascript

Pyramid将models.py文件的内容分布到多个文件的方法

2013/11/27 Python

Python随机生成信用卡卡号的实现方法

2015/05/14 Python

关于python写入文件自动换行的问题

2018/06/23 Python

Python时间和字符串转换操作实例分析

2019/03/16 Python

python 操作mysql数据中fetchone()和fetchall()方式

2020/05/15 Python

html5简单示例_动力节点Java学院整理

2017/07/07 HTML / CSS

Spartoo西班牙官网：法国时尚购物网站

2018/03/27 全球购物

英国泽西岛植物：Jersey Plants Direct

2019/08/07 全球购物

商场促销活动方案

2014/02/08 职场文书

酒店财务总监岗位职责

2015/04/03 职场文书

辛德勒的名单观后感

2015/06/03 职场文书

让JavaScript代码更加精简的方法技巧

2022/06/01 Javascript

服务器SVN搭建图文安装过程

2022/06/21 Servers