HTML代码

css代码#level{

width:100%;

height:1px;

position:absolute;

top:50%;

}

#content{

text-align:center;

margin-top:-327px;

}

#gears{

width:478px;

height:655px;

position:relative;

display:inline-block;

vertical-align:middle;

}

#gears-static{

background:url(FgFnjks.png) no-repeat -363px -903px;

width:329px;

height:602px;

position:absolute;

bottom:5px;

right:0px;

opacity:0.4;

}

#title{

vertical-align:middle;

color:#9EB7B5;

width:43%;

display:inline-block;

}

#title h1{

font-family: 'PTSansNarrowBold', sans-serif;

font-size:3.6em;

text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px;

}

#title p{

font-family: sans-serif;

font-size:1.2em;

line-height:148%;

text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px;

}

.shadow{

-webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);

-moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);

box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36);

}

/*gear-system-1*/

#gear15{

background: url(FgFnjks.png) no-repeat 0 -993px;

width: 321px;

height: 321px;

position:absolute;

left:45px;

top:179px;

-webkit-animation: rotate-back 24000ms linear infinite;

-moz-animation: rotate-back 24000ms linear infinite;

-ms-animation: rotate-back 24000ms linear infinite;

animation: rotate-back 24000ms linear infinite;

}

#shadow15{

width:306px;

height:306px;

-webkit-border-radius:153px;

-moz-border-radius:153px;

border-radius:153px;

position:absolute;

left:52px;

top:186px;

}

#gear14{

background: url(FgFnjks.png) no-repeat 0 -856px;

width: 87px;

height: 87px;

position:absolute;

left:162px;

top:296px;

}

#shadow14{

width:70px;

height:70px;

-webkit-border-radius:35px;

-moz-border-radius:35px;

border-radius:35px;

position:absolute;

left:171px;

top:304px;

}

#gear13{

background: url(FgFnjks.png) no-repeat 0 -744px;

width: 62px;

height: 62px;

position:absolute;

left:174px;

top:309px;

-webkit-animation: rotate 8000ms linear infinite;

-moz-animation: rotate 8000ms linear infinite;

-ms-animation: rotate 8000ms linear infinite;

animation: rotate 8000ms linear infinite;

}

#shadow13{

width:36px;

height:36px;

-webkit-border-radius:18px;

-moz-border-radius:18px;

border-radius:18px;

position:absolute;

left:187px;

top:322px;

}

/*gear-system-2*/

#gear10{

background: url(FgFnjks.png) no-repeat 0 -184px;

width: 122px;

height: 122px;

position:absolute;

left:175px;

top:0;

-webkit-animation: rotate-back 8000ms linear infinite;

-moz-animation: rotate-back 8000ms linear infinite;

-ms-animation: rotate-back 8000ms linear infinite;

animation: rotate-back 8000ms linear infinite;

}

#shadow10{

width:86px;

height:86px;

-webkit-border-radius:43px;

-moz-border-radius:43px;

border-radius:43px;

position:absolute;

left:193px;

top:18px;

}

#gear3{

background: url(FgFnjks.png) no-repeat 0 -1493px;

width: 85px;

height: 84px;

position:absolute;

left:194px;

top:19px;

-webkit-animation: rotate 10000ms linear infinite;

-moz-animation: rotate 10000ms linear infinite;

-ms-animation: rotate 10000ms linear infinite;

animation: rotate 10000ms linear infinite;

}

#shadow3{

width:60px;

height:60px;

-webkit-border-radius:30px;

-moz-border-radius:30px;

border-radius:30px;

position:absolute;

left:206px;

top:31px;

}

/*gear-system-3*/

#gear9{

background: url(FgFnjks.png) no-repeat -371px -280px;

width: 234px;

height: 234px;

position:absolute;

left:197px;

top:96px;

-webkit-animation: rotate 12000ms linear infinite;

-moz-animation: rotate 12000ms linear infinite;

-ms-animation: rotate 12000ms linear infinite;

animation: rotate 12000ms linear infinite;

}

#shadow9{

width:200px;

height:200px;

-webkit-border-radius:100px;

-moz-border-radius:100px;

border-radius:100px;

position:absolute;

left:214px;

top:113px;

}

#gear7{

background: url(FgFnjks.png) no-repeat -371px 0;

width: 108px;

height: 108px;

position:absolute;

left:260px;

top:159px;

-webkit-animation: rotate-back 10000ms linear infinite;

-moz-animation: rotate-back 10000ms linear infinite;

-ms-animation: rotate-back 10000ms linear infinite;

animation: rotate-back 10000ms linear infinite;

}

#shadow7{

width:76px;

height:76px;

-webkit-border-radius:38px;

-moz-border-radius: 38px;

border-radius: 38px;

position:absolute;

left:276px;

top:175px;

}

/*gear-system-4*/

#gear6{

background: url(FgFnjks.png) no-repeat 0 -1931px;

width: 134px;

height: 134px;

position:absolute;

left:305px;

bottom:212px;

-webkit-animation: rotate-back 10000ms linear infinite;

-moz-animation: rotate-back 10000ms linear infinite;

-ms-animation: rotate-back 10000ms linear infinite;

animation: rotate-back 10000ms linear infinite;

}

#shadow6{

width:98px;

height:98px;

-webkit-border-radius:49px;

-moz-border-radius: 49px;

border-radius: 49px;

position:absolute;

left:323px;

bottom:230px;

}

#gear4{

background: url(FgFnjks.png) no-repeat 0 -1627px;

width: 69px;

height: 69px;

position:absolute;

left:337px;

bottom:245px;

-webkit-animation: rotate-back 10000ms linear infinite;

-moz-animation: rotate-back 10000ms linear infinite;

-ms-animation: rotate-back 10000ms linear infinite;

animation: rotate-back 10000ms linear infinite;

}

/*gear-system-5*/

#gear12{

background: url(FgFnjks.png) no-repeat 0 -530px;

width: 164px;

height: 164px;

position:absolute;

left:208px;

bottom:85px;

-webkit-animation: rotate 8000ms linear infinite;

-moz-animation: rotate 8000ms linear infinite;

-ms-animation: rotate 8000ms linear infinite;

animation: rotate 8000ms linear infinite;

}

#shadow12{

width:124px;

height:124px;

-webkit-border-radius:62px;

-moz-border-radius:62px;

border-radius:62px;

position:absolute;

left:225px;

bottom:107px;

}

#gear11{

background: url(FgFnjks.png) no-repeat 0 -356px;

width: 125px;

height: 124px;

position:absolute;

left:228px;

bottom:105px;

-webkit-animation: rotate-back 10000ms linear infinite;

-moz-animation: rotate-back 10000ms linear infinite;

-ms-animation: rotate-back 10000ms linear infinite;

animation: rotate-back 10000ms linear infinite;

}

#shadow11{

width:88px;

height:88px;

-webkit-border-radius:44px;

-moz-border-radius:44px;

border-radius:44px;

position:absolute;

left:247px;

bottom:123px;

}

#gear8{

background: url(FgFnjks.png) no-repeat -371px -158px;

width: 72px;

height: 72px;

position:absolute;

left:254px;

bottom:131px;

-webkit-animation: rotate 6000ms linear infinite;

-moz-animation: rotate 6000ms linear infinite;

-ms-animation: rotate 6000ms linear infinite;

animation: rotate 6000ms linear infinite;

}

#shadow8{

width:42px;

height:42px;

-webkit-border-radius:21px;

-moz-border-radius: 21px;

border-radius: 21px;

position:absolute;

left:269px;

bottom:146px;

}

/*gear1*/

#gear1{

background: url(FgFnjks.png) no-repeat 0 0;

width: 135px;

height: 134px;

position:absolute;

left:83px;

bottom:111px;

-webkit-animation: rotate-back 10000ms linear infinite;

-moz-animation: rotate-back 10000ms linear infinite;

-ms-animation: rotate-back 10000ms linear infinite;

animation: rotate-back 10000ms linear infinite;

}

#shadow1{

width:96px;

height:96px;

-webkit-border-radius:48px;

-moz-border-radius:48px;

border-radius:48px;

position:absolute;

left:103px;

bottom:130px;

}

/*gear-system-6*/

#gear5{

background: url(FgFnjks.png) no-repeat 0 -1746px;

width: 134px;

height: 135px;

position:absolute;

left:22px;

top:108px;

-webkit-animation: rotate 10000ms linear infinite alternate;

-moz-animation: rotate 10000ms linear infinite alternate;

-ms-animation: rotate 10000ms linear infinite alternate;

animation: rotate 10000ms linear infinite alternate;

}

#shadow5{

width:96px;

height:96px;

-webkit-border-radius:48px;

-moz-border-radius:48px;

border-radius:48px;

position:absolute;

left:41px;

top:127px;

}

#gear2{

background: url(FgFnjks.png) no-repeat 0 -1364px;

width: 80px;

height: 79px;

position:absolute;

left:49px;

top:136px;

-webkit-animation: rotate-back 10000ms linear infinite alternate;

-moz-animation: rotate-back 10000ms linear infinite alternate;

-ms-animation: rotate-back 10000ms linear infinite alternate;

animation: rotate-back 10000ms linear infinite alternate;

}

/*weight*/

#weight{

background: url(FgFnjks.png) no-repeat -371px -564px;

width: 34px;

height: 92px;

position:absolute;

left:1px;

bottom:0;

-webkit-animation: up 10000ms linear infinite alternate;

-moz-animation: up 10000ms linear infinite alternate;

-ms-animation: up 10000ms linear infinite alternate;

animation: up 10000ms linear infinite alternate;

}

#shadowweight{

width:10px;

height:80px;

position:absolute;

left:12px;

bottom:0px;

-webkit-animation: up 10000ms linear infinite alternate;

-moz-animation: up 10000ms linear infinite alternate;

-ms-animation: up 10000ms linear infinite alternate;

animation: up 10000ms linear infinite alternate;

}

/*chain*/

#chain-circle{

background: url(FgFnjks.png) no-repeat -371px -706px;

width:146px;

height:147px;

position:absolute;

left:17px;

top:102px;

-webkit-animation: rotate 10000ms linear infinite alternate;

-moz-animation: rotate 10000ms linear infinite alternate;

-ms-animation: rotate 10000ms linear infinite alternate;

animation: rotate 10000ms linear infinite alternate;

}

#chain{

width:1px;

height:380px;

border-left:2px dotted #C8D94A;

position:absolute;

left:17px;

top:175px;

opacity:0.7;

-webkit-animation: collapse 10000ms linear infinite alternate;

-moz-animation: collapse 10000ms linear infinite alternate;

-ms-animation: collapse 10000ms linear infinite alternate;

animation: collapse 10000ms linear infinite alternate;

}

/*ANIMATIONS*/

/*rotate*/

@keyframes "rotate" {

from {

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

-o-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-moz-keyframes rotate {

from {

-moz-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-moz-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-webkit-keyframes "rotate" {

from {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-ms-keyframes "rotate" {

from {

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-o-keyframes "rotate" {

from {

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

}

/*rotate-back*/

@keyframes "rotate-back" {

from {

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

-o-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-webkit-transform: rotate(-360deg);

-moz-transform: rotate(-360deg);

-o-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

transform: rotate(-360deg);

}

}

@-moz-keyframes rotate-back {

from {

-moz-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-moz-transform: rotate(-360deg);

transform: rotate(-360deg);

}

}

@-webkit-keyframes "rotate-back" {

from {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-webkit-transform: rotate(-360deg);

transform: rotate(-360deg);

}

}

@-ms-keyframes "rotate-back" {

from {

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-ms-transform: rotate(-360deg);

transform: rotate(-360deg);

}

}

@-o-keyframes "rotate-back" {

from {

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-o-transform: rotate(-360deg);

transform: rotate(-360deg);

}

}

/*weight up*/

@keyframes "up" {

from {

bottom: 0px;

}

to {

bottom: 340px;

}

}

@-moz-keyframes up {

from {

bottom: 0px;

}

to {

bottom: 340px;

}

}

@-webkit-keyframes "up" {

from {

bottom: 0px;

}

to {

bottom: 340px;

}

}

@-ms-keyframes "up" {

from {

bottom: 0px;

}

to {

bottom: 340px;

}

}

@-o-keyframes "up" {

from {

bottom: 0px;

}

to {

bottom: 340px;

}

}

/*chain up and down*/

@keyframes "collapse" {

from {

height: 387px;

}

to {

height: 48px;

}

}

@-moz-keyframes collapse {

from {

height: 387px;

}

to {

height: 48px;

}

}

@-webkit-keyframes "collapse" {

from {

height: 387px;

}

to {

height: 48px;

}

}

@-ms-keyframes "collapse" {

from {

height: 387px;

}

to {

height: 48px;

}

}

@-o-keyframes "collapse" {

from {

height: 387px;

}

to {

height: 48px;

}

}

以上就是HTML5模拟齿轮动画代码实例的内容，更多相关内容请关注PHP中文网(www.php.cn)！

HTML绘制齿轮,HTML5模拟齿轮动画代码实例相关推荐

  1. python樱花代码_使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例

    今天为大家介绍几个Python"装逼"实例代码,python绘制樱花.玫瑰.圣诞树代码实例,主要使用了turtle库 Python绘制樱花代码实例 动态生成樱花 效果图(这个是动态 ...

  2. 用python画圣诞树-使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例

    今天为大家介绍几个Python"装逼"实例代码,python绘制樱花.玫瑰.圣诞树代码实例,主要使用了turtle库 Python绘制樱花代码实例 动态生成樱花 效果图(这个是动态 ...

  3. python使用turtle库绘制一个100长度的十字架_使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例...

    使用python图形模块turtle库绘制樱花.玫瑰.圣诞树代码实例 发布时间:2020-08-22 15:57:19 来源:脚本之家 阅读:76 作者:Soul fragments 今天为大家介绍几 ...

  4. 绘制图形可以使用什么python数据库_使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例...

    今天为大家介绍几个Python"装逼"实例代码,python绘制樱花.玫瑰.圣诞树代码实例,主要使用了turtle库 Python绘制樱花代码实例 动态生成樱花 效果图(这个是动态 ...

  5. HTML5模拟齿轮动画

    这是一个基于HTML5的齿轮动画特效,我们将齿轮转动的物理学原理,转换为HTML5代码,在网页上实现了模拟齿轮转动的动画效果.该齿轮动画的最大特点是它由好多个齿轮组成,这对齿轮传动的算法要求就大大提高 ...

  6. html5绘制菱形,HTML5 canvas 菱形动画齿轮 - 开源中国

    原创. 通过 HTML5 canvas 创造由18个菱形构成的齿轮,并产生动画效果. An animation is made of the wheel consisting 18 diamends. ...

  7. html5地球旋转效果,javascript模拟地球旋转效果代码实例

    JS模拟地球旋转-柯乐义 JS模拟地球旋转·柯乐义 eval(z = 'p=""/* ,.oq#+ ,._, */;for(y in n="zw24l6k\ 4e3t4j ...

  8. php indexdb,html5使用indexdb的代码实例分享（图文）

    前面说过html5对于离线应用的支持是很好的,不禁支持localstorage这样在客户端存储一个键值对的方式而且还可以引用manifest文件,将需要缓存的文件在其中定义,其实html5中还可以使用 ...

  9. php 银行卡4位分隔,javascript将数字四位分隔模拟银行卡号码代码实例

    [HTML] 纯文本查看 复制代码 蚂蚁部落 function func (BankNo){ if (BankNo.value == "") return; var account ...

最新文章

  1. Spring Boot轻松理解动态注入，删除bean
  2. 详细解析用C#写的小游戏《彩色连珠》（附源代码）
  3. python sqlalchemy mysql 自动映射
  4. React的Transaction浅析
  5. Java内存模型深度解析：总结
  6. Struts2 返回 json 格式数据
  7. Flask实现图片的上传、下载及展示
  8. 【云计算的1024种玩法】10分钟轻松设置出 A+ 评分的 HTTP/2 网站
  9. RTMPDump源代码分析 0： 主要函数调用分析
  10. linux设置ip批处理文件,一篇详细的修改ip的方法
  11. 电影播放器mplayer设置常用选项
  12. 软件测试用例优先级,软件测试用例的优先级划分方法
  13. 明确数据分析目标的 3 个步骤
  14. 中职网络安全2022国赛之隐写术应用
  15. 单层石墨烯工业化量产科研成果及工业化量产基地落地
  16. python ccf题解 201412-3 集合竞价
  17. 请问外贸独立站靠谱的收款工具有哪些，求推荐！？
  18. MySQL 数据库之 MMM 高可用架构构建
  19. 系统性综述：特征点检测与匹配
  20. 《孙子兵法》与《战争论》对比

热门文章

  1. Win10安装Ubuntu22.04后,The Windows Subsystem for Linux optional component is not enabled. Please enable
  2. Office 修复、卸载重装方法
  3. 国家高新技术企业即将启动
  4. 水仙花数(调用函数)
  5. 西湖大学正式开学！ 120名博士新生入校，每月补助5000多元
  6. DOM实现元素拖拽，滚轮事件和特效动画缓冲运动处理
  7. 葫芦娃各平台以及微信hook分析汇总
  8. 193页PPT读懂《数字化转型方法论》，强烈建议收藏！
  9. mac 系统怎么更改 pip 源
  10. 关于poi导出excel浏览器不下载的问题