编程 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特性绘制简易版围棋效果

Sep 28 HTML / CSS

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

May 07 HTML / CSS

css3 box-sizing属性使用参考指南

Jan 08 HTML / CSS

浅谈CSS3动画的回调处理

Jul 21 HTML / CSS

CSS3 animation ? steps 函数详解

Aug 30 HTML / CSS

CSS3 中filter（滤镜）属性使用详解

Apr 07 HTML / CSS

CSS3 实现倒计时效果

Nov 25 HTML / CSS

在HTML5 Canvas中放入图片和保存为图片的方法

May 03 HTML / CSS

CSS3 画基本图形，圆形、椭圆形、三角形等

Sep 20 HTML / CSS

Web前端页面跳转并取到值

Apr 24 HTML / CSS

CSS font-variation 可变字体的魅力(实例详解)

Mar 03 HTML / CSS

HTML 里 img 元素的 src 和 srcset 属性的区别详解

May 21 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中文字符串截取函数

2013/11/12 PHP

Laravel 5框架学习之日期，Mutator 和 Scope

2015/04/08 PHP

小程序微信退款功能实现方法详解【基于thinkPHP】

2019/05/05 PHP

HR vs CL BO3 第二场 2.13

2021/03/10 DOTA

JavaScript语言中的Literal Syntax特性分析

2007/03/08 Javascript

window.location.hash 属性使用说明

2010/03/20 Javascript

Jquery中dialog属性小记

2010/09/03 Javascript

jQuery下扩展插件和拓展函数的写法（匿名函数使用的典型例子）

2010/10/20 Javascript

jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

2011/10/01 Javascript

js change,propertychange,input事件小议

2011/12/20 Javascript

js截取字符串的两种方法及区别详解

2013/11/05 Javascript

JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

2015/03/02 Javascript

利用nodejs监控文件变化并使用sftp上传到服务器

2017/02/18 NodeJs

jQuery实现字体颜色渐变效果的方法

2017/03/29 jQuery

详解Vue.js和layui日期控件冲突问题解决办法

2019/07/25 Javascript

element表格翻页第2页从1开始编号(后端从0开始分页)

2019/12/10 Javascript

vue实现购物车的小练习

2020/12/21 Vue.js

[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式

2017/08/09 DOTA

[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15

2019/08/17 DOTA

python测试驱动开发实例

2014/10/08 Python

python 默认参数问题的陷阱

2016/02/29 Python

Python引用模块和查找模块路径

2016/03/17 Python

Python实现两款计算器功能示例

2017/12/19 Python

Python matplotlib画图与中文设置操作实例分析

2019/04/23 Python

python opencv实现图像边缘检测

2019/04/29 Python

django rest framework 实现用户登录认证详解

2019/07/29 Python

Python实现平行坐标图的绘制(plotly)方式

2019/11/22 Python

在pycharm中创建django项目的示例代码

2020/05/28 Python

浅谈numpy中np.array()与np.asarray的区别以及.tolist

2020/06/03 Python

2020年10款优秀的Python第三方库,看看有你中意的吗？

2021/01/12 Python

英国Flybe航空官网：欧洲最大的独立支线廉价航空公司

2019/07/15 全球购物

2013年办公室秘书的个人自我鉴定

2013/10/24 职场文书

教师绩效考核方案

2014/01/21 职场文书

人力资源管理专业自荐书范文

2014/02/10 职场文书

青春奉献演讲稿

2014/05/08 职场文书

利用Python+OpenCV三步去除水印

2021/05/28 Python