一团网资讯

一团资讯 > html5 > 基于HTML5的齿轮动画特效

基于HTML5的齿轮动画特效

2018-02-03 02:53:00     发布者：来源网络

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

HTML代码

XML/HTML Code复制内容到剪贴板

CSS代码

CSS Code复制内容到剪贴板

#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;

bottombottom:5px;

rightright: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);

}

#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;

}

#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;

}

#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;

}

#gear6{

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

width: 134px;

height: 134px;

position:absolute;

left:305px;

bottombottom: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;

bottombottom:230px;

}

#gear4{

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

width: 69px;

height: 69px;

position:absolute;

left:337px;

bottombottom: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;

}

#gear12{

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

width: 164px;

height: 164px;

position:absolute;

left:208px;

bottombottom: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;

bottombottom:107px;

}

#gear11{

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

width: 125px;

height: 124px;

position:absolute;

left:228px;

bottombottom: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;

bottombottom:123px;

}

#gear8{

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

width: 72px;

height: 72px;

position:absolute;

left:254px;

bottombottom: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;

bottombottom:146px;

}

#gear1{

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

width: 135px;

height: 134px;

position:absolute;

left:83px;

bottombottom: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;

bottombottom:130px;

}

#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{

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

width: 34px;

height: 92px;

position:absolute;

left:1px;

bottombottom: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;

bottombottom: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-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;

}

@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);

}

}

@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);

}

}

@keyframes "up" {

from {

bottombottom: 0px;

}

to {

bottombottom: 340px;

}

}

@-moz-keyframes up {

from {

bottombottom: 0px;

}

to {

bottombottom: 340px;

}

}

@-webkit-keyframes "up" {

from {

bottombottom: 0px;

}

to {

bottombottom: 340px;

}

}

@-ms-keyframes "up" {

from {

bottombottom: 0px;

}

to {

bottombottom: 340px;

}

}

@-o-keyframes "up" {

from {

bottombottom: 0px;

}

to {

bottombottom: 340px;

}

}

@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;

}

}

纯CSS3实现的齿轮动画特效，希望大家喜欢。

[ 责任编辑：来源网络 ]

html5钟表带齿轮项目,基于HTML5的齿轮动画特效相关推荐

  1. ssm毕设项目基于HTML5的流浪动物领养平台yww0b（java+VUE+Mybatis+Maven+Mysql+sprnig）

    ssm毕设项目基于HTML5的流浪动物领养平台yww0b(java+VUE+Mybatis+Maven+Mysql+sprnig) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + My ...

  2. android 滑动缩放监听,基于Android的ViewPager动画特效实现页面左右滑动效果(实现缩放...

    基于Android的ViewPager动画特效实现页面左右滑动效果(实现缩放 基于Android的ViewPager动画特效实现页面左右滑动效果(实现缩放和透明效果) 在上一个项目的基础上做修改,项目 ...

  3. VUE jQuery+VUE带实时节气创意圆形罗盘时钟动画特效

    1.外部引用的js文件 ①jquery版本:jquery-3.3.1.js(可以自己找一个jQuery版本,不要太旧就行) <script type="text/javascript& ...

  4. html5录音功能代码,recorder.js 基于 HTML5 实现录音功能

    recorder.js 基于 HTML5 实现录音功能2020-06-23 01:49:56 recorder.js microphone基于HTML5的录音功能,输出格式为mp3文件. 前言 完全依 ...

  5. html5研究背景及意义,基于HTML5的统计图表系统的研究与设计

    摘要: 随着网络科技的发展,未来的网络方向越来越明了,软件产品越来越具有适应性的特点.可以这样说,硬件产品,网络产品和软件产品都在快速的变化以适应信息科技的发展.在这种背景下,人们越来越关注产品的价值 ...

  6. html5 图片处理 开源,AlloyImage 基于 HTML5 的专业级图像处理开源引擎 - 文章教程...

    AlloyImage(AI)是一个基于html5技术的JS图像处理库,集成了一些方便快捷的图像处理API,您可以将它引用到您的网页中,结合css3等技术,做出一些之前无法做到的优美效果,或者,提供一个 ...

  7. html5图像编码游戏开题报告,基于HTML5的英语学习APP开题报告

    项目背景 社会生活的信息化和经济的全球化,使英语的重要性日益突出.英语作为最重要的信息载体之一,已成为人类生活各个领域中使用最广泛的语言.许多国家在基础教育发展战略中,都把英语教育作为公民素质教育的重 ...

  8. 基于html5 源码,10款基于HTML5+CSS3实现的超酷源码动画

    1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...

  9. html5做一个展示页面,基于HTML5的WebGL实现json和echarts图表展现在同一个界面

    突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...

  10. 基于html5的旅游交流系统,基于HTML5的旅游移动导览系统的研究与实现

    摘要: 本文通过研究HTML5新的特性,结合移动互联网,云计算,3G通信,WebGIS等"智慧技术"手段,以计算机,移动设备,智能终端等为工具,以智慧服务为主要表现形式,满足游客& ...

最新文章

  1. 全栈 - 20 Web 基础 网页的血肉 CSS
  2. Daily Storm - 31/10/12
  3. scipy.spatial.distance 与 sklearn cosine_similarity
  4. C# 在异步中使用HttpWebRequest出现的“正在终止线程”错误的解决方案
  5. Nature：中国正在上演AI人才争夺战，中国公司在与Google竞争
  6. cura-engine学习（1）
  7. java怎么判断数据类型_数据类型判断
  8. java生产者消费者gui_java理论之java--GUI(图形用户管理)与 IO/流
  9. 光驱安装centos7系统过程_centos7可以ping通外网_可以ping通内网其他机器_但是其他机器就是ping不通centos7_太神奇了---linux工作笔记041
  10. 爬虫入门到精通-headers的详细讲解（模拟登录知乎）
  11. 软件测试试题，软件评测师考试
  12. bp神经网络算法原理公式,bp神经网络算法推导
  13. i3 10105F参数配置 i3 10105F怎么样
  14. 产品经理素质能力模型
  15. linux系统双显示器怎么设置复制,在 Linux 中配置双显示器
  16. 负载均衡实现的各种优缺点
  17. PTC指定位置安装许可服务器,PTC安装在终端服务器上的問題
  18. 第三只眼监控软件第三只眼网络监控软件
  19. 【操作系统】内存管理
  20. “海底捞”的管理智慧

热门文章

  1. 安防巨头们集体造车 跳出安防已成常态
  2. MyEclipse项目中的包按层次显示
  3. 【转】常用 blas 函数
  4. OpenSTA —— 高效的 web 性能测试工具
  5. linux jdk安装
  6. 6.携程架构实践 --- 数据库
  7. 16.企业应用架构模式 --- 离线并发模式
  8. 16.Mac 修改主机名
  9. 3. Ubuntu LAMP 环境搭建
  10. css中的clip:rect() 只能在绝对定位的元素上使用