编程 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进行截取替代js的substring

Sep 02 HTML / CSS

CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性

Sep 02 HTML / CSS

css3实现3D色子翻转特效

Dec 23 HTML / CSS

浅谈CSS3特性查询（Feature Query: @supports）功能简介

Jul 31 HTML / CSS

HTML5 video视频字幕的使用和制作方法

May 03 HTML / CSS

分享一个页面平滑滚动小技巧(推荐)

Oct 23 HTML / CSS

HTML5不支持标签和新增标签详解

Jun 27 HTML / CSS

SVG实现多彩圆环倒计时效果的示例代码

Nov 21 HTML / CSS

使用Html5中的cavas画一面国旗

Sep 25 HTML / CSS

浅谈CSS不规则边框的生成方案

May 25 HTML / CSS

CSS实现隐藏搜索框功能(动画正反向序列)

Jul 21 HTML / CSS

CSS使用SVG实现动态分布的圆环发散路径动画

Dec 24 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

phpMyAdmin 安装教程全攻略

2007/03/19 PHP

某大型网络公司应聘时的笔试题目附答案

2008/03/27 PHP

php验证是否是md5编码的简单代码

2014/04/01 PHP

Zend Guard使用指南及问题处理

2015/01/07 PHP

MacOS 安装 PHP的图片裁剪扩展Tclip

2015/03/25 PHP

PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能

2018/05/31 PHP

CodeIgniter框架钩子机制实现方法【hooks类】

2018/08/21 PHP

Yii2框架实现利用mpdf创建pdf文件功能示例

2019/02/08 PHP

php实例分享之实现显示网站运行时间

2014/05/20 Javascript

jquery ui bootstrap 实现自定义风格

2014/11/14 Javascript

JavaScript中的pow()方法使用详解

2015/06/15 Javascript

jQuery Ajax传值到Servlet出现乱码问题的解决方法

2016/10/09 Javascript

jQuery删除当前节点元素

2016/12/07 Javascript

Base64(二进制)图片编码解析及在各种浏览器的兼容性处理

2017/02/09 Javascript

原生JS实现幻灯片

2017/02/22 Javascript

jquery中each循环的简单回滚操作

2017/05/05 jQuery

JS基于对象的特性实现去除数组中重复项功能详解

2017/11/17 Javascript

javascript实现电商放大镜效果

2020/11/23 Javascript

[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/20 DOTA

[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24

2018/08/25 DOTA

python字符串连接方式汇总

2014/08/21 Python

Python实现多线程抓取妹子图

2015/08/08 Python

Python输出带颜色的字符串实例

2017/10/10 Python

浅谈pyqt5中信号与槽的认识

2019/02/17 Python

python nmap实现端口扫描器教程

2020/05/28 Python

Python argparse模块使用方法解析

2020/02/20 Python

Python爬取股票信息，并可视化数据的示例

2020/09/26 Python

python把一个字符串切开的实例方法

2020/09/27 Python

python 调用API接口获取和解析 Json数据

2020/09/28 Python

CSS3中31种选择器使用方法教程

2013/12/05 HTML / CSS

使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能

2016/12/16 HTML / CSS

Unix如何在一行中运行多个命令

2015/05/29 面试题

学生感冒英文请假条

2014/02/04 职场文书

标枪加油稿

2015/07/22 职场文书

八年级作文之我的母亲

2019/12/10 职场文书

MySQL 查询速度慢的原因

2021/05/25 MySQL