编程 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轻松实现圆角效果

Nov 09 HTML / CSS

CSS3 Backgrounds属性相关介绍

May 11 HTML / CSS

CSS3绘制圆角矩形的简单示例

Sep 28 HTML / CSS

HTML5 Canvas实现文本对齐的方法总结

Mar 24 HTML / CSS

HTML5 progress和meter控件_动力节点Java学院整理

Jul 06 HTML / CSS

使用Canvas操作像素的方法

Jun 14 HTML / CSS

HTML5 Canvas的性能提高技巧经验分享

Jul 02 HTML / CSS

整理HTML5的一些新特性与Canvas的常用属性

Jan 29 HTML / CSS

移动端HTML5实现文件上传功能【附代码】

Mar 25 HTML / CSS

HTML5 拖放功能实现代码

Jul 14 HTML / CSS

html5实现多图片预览上传及点击可拖拽控件

Mar 15 HTML / CSS

HTML5实现无刷新修改URL的方法

Nov 14 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

业余方法DIY电子管FM收音机

2021/03/02 无线电

Symfony数据校验方法实例分析

2015/01/26 PHP

php基于curl重写file_get_contents函数实例

2016/11/08 PHP

Jquery 扩展方法

2010/05/06 Javascript

jquery 实现窗口的最大化不论什么情况

2013/09/03 Javascript

Javascript实现视频轮播在pc端与移动端均可

2013/09/29 Javascript

node.js中的querystring.escape方法使用说明

2014/12/10 Javascript

JQuery中基础过滤选择器用法实例分析

2015/05/18 Javascript

Jquery判断form表单数据是否变化

2016/03/30 Javascript

随机生成10个不重复的0-100的数字(实例讲解)

2017/08/16 Javascript

JS实现评价的星星功能

2017/08/20 Javascript

JavaScript生成指定范围随机数和随机序列的方法

2018/05/05 Javascript

Vue.js中 v-model 指令的修饰符详解

2018/12/03 Javascript

Vue——前端生成二维码的示例

2020/12/19 Vue.js

[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日

2021/03/11 DOTA

获取Django项目的全部url方法详解

2017/10/26 Python

Django 中使用流响应处理视频的方法

2018/07/20 Python

使用python制作一个为hex文件增加版本号的脚本实例

2019/06/12 Python

TensorFlow实现简单的CNN的方法

2019/07/18 Python

Python实现剪刀石头布小游戏(与电脑对战)

2019/12/31 Python

Pytorch 实现focal_loss 多类别和二分类示例

2020/01/14 Python

基于Tensorflow高阶读写教程

2020/02/10 Python

python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例

2020/03/06 Python

解决pyqt5异常退出无提示信息的问题

2020/04/08 Python

Django DRF APIView源码运行流程详解

2020/08/17 Python

Pandas替换及部分替换（replace）实现流程详解

2020/10/12 Python

CSS3实现翘边的阴影效果的代码示例

2016/06/13 HTML / CSS

英国安全产品购物网站：The Safe Shop

2017/03/20 全球购物

SportsDirect.com马来西亚：英国第一体育零售商

2018/11/21 全球购物

北美最大的零售退货翻新商：VIP Outlet

2019/11/21 全球购物

JSF面试题：如何管量web层中的Bean，用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?

2012/10/05 面试题

某公司.Net方向面试题

2014/04/24 面试题

2013年学期结束动员演讲稿

2014/01/07 职场文书

项目转让协议书

2014/10/27 职场文书

父母教会我观后感

2015/06/17 职场文书

MySQL数据库之内置函数和自定义函数 function

2022/06/16 MySQL