HTML绘制齿轮,HTML5模拟齿轮动画代码实例

最新推荐文章于 2023-07-18 17:58:46 发布
最新推荐文章于 2023-07-18 17:58:46 发布
阅读量313 收藏
点赞数
文章标签： HTML绘制齿轮

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)！

weixin_39525617
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5拖动按钮齿轮动画切换特效特效代码
03-20
HTML5拖动按钮齿轮动画切换特效是一款有趣的HTML5特效，鼠标拖动左下角滑块并滑到滑槽右端右边会切换相应的内容，左边齿轮动画跟着转动内容切换代码。
机械零件工程图(含三维)绘制实例视频教程1.8-齿轮的绘制.mp4
04-14
视频教程
基于HTML5的齿轮动画特效
09-28
主要为大家详细介绍了基于HTML5的齿轮动画特效，该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，如何实现齿轮动画，感兴趣的小伙伴们可以参考一下
AutoCAD 2017机械绘图实例视频教程下载5.1 绘制齿轮.avi
04-13
AutoCAD 2020机械设计零基础视频教程
基于Simulation的直齿圆柱齿轮齿根应力分析
07-01
利用SolidWorks三维设计软件,结合VB、CAXA的优点,采用了3种方法绘制直齿圆柱齿轮的齿形图,通过拉伸、切除、阵列等特征方法实现渐开线齿轮的实体建模。针对具体实例,在建模的基础上用Simulation对生成的直齿圆柱齿轮分别进行了应力仿真,并与理论计算值进行比较,验证了仿真的正确性。
【HTML+css】动态齿轮 （齿轮 动图）
weixin_63436826的博客
07-18 231
效果图 html代码块 <!DOCTYPE html> <html lang="en"> <head> <!-- name：myw --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &l
【哈理工实验二】HTML+CSS3 旋转齿轮特效
weixin_43899069的博客
04-03 786
实现效果： HTML部分代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> &l
HTML绘制齿轮,使用css3制作齿轮loading动画效果
weixin_39586395的博客
06-29 421
HTML首先在页面中引入font-awesome文件。然后在放置动画的位置加上HTML结构：CSS样式然后通过下面的CSS样式来制作齿轮的动画效果。#loader-wrapper {width: 60px;height: 60px;margin: auto;position: relative;}.loader{ position: absolute; }#loader1{color: #3A46...
html css齿轮滚动特效,纯CSS3实现的齿轮滚动动画
weixin_39950083的博客
06-04 296
CSS语言：CSSSCSS确定#gearwheel-a {height: 400px;width: 400px;border-radius: 50% 50%;background: -webkit-radial-gradient(circle, SandyBrown 10%, black 10%, black 20%, transparent 20%), -webkit-linear-gradie...
实验四 HTML5 CSS3齿轮滚动(CSS3动画、变形)
qq_42907074的博客
06-12 785
01.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/css.css" rel="stylesheet" type="text/css" media="a.
CorelDRAW实例：齿轮绘制借鉴.pdf
12-25
CorelDRAW实例：齿轮绘制借鉴.pdf
HTML+CSS3 旋转齿轮特效
weixin_44592738的博客
12-01 1803
HTML+CSS3 旋转齿轮特效
HTML5画布齿轮
limeiyans喜欢编程的那些事
01-19 996
很有意思的一个代码。 body { margin: 0px; padding: 0px; } window.requestAnimFrame = (function(callback) { return window.requestAnimat
HTML5模拟齿轮动画
Dragon.G
06-09 1968
这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。HTML<html><head> <meta charset="gb2312"> <link href="css/zzsc.css
html5轮滑效果,基于HTML5的齿轮动画特效
weixin_35866747的博客
06-03 249
#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;}#gea...
html5钟表带齿轮项目,基于HTML5的齿轮动画特效
weixin_35452656的博客
06-28 220
一团网资讯一团资讯 > html5 > 基于HTML5的齿轮动画特效基于HTML5的齿轮动画特效2018-02-03 02:53:00 发布者：来源网络这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用Java...
html滚轮下拉动画,html5+css3齿轮滚动动画代码
weixin_32827773的博客
06-03 334
HTML5制作齿轮滚动动画效果。文件引用：setInterval(function(){move('.sec4-img-1').set('bottom','300px').set('opacity','0').duration('2s').ease('in-out').end(function(){move('.sec4-img-1').set('bottom','561px').s...
钢筋混凝土污水池及提升泵站施工方案.doc
最新发布
05-03
课程设计污水处理
爱情树 html5实现唯美表白动画代码
07-17
### 回答1： 要实现一个爱情树的唯美表白动画，可以使用HTML5来完成。以下是一个简单的代码示例： ```html <!DOCTYPE html> <html> <head> <style> body { background-color: skyblue; } #tree { position: relative; width: 250px; height: 400px; margin: 100px auto; } #heart { position: absolute; top: 120px; left: 80px; width: 100px; height: 100px; background-color: red; border-radius: 50%; transform: rotate(-45deg); } #heart:before, #heart:after { content: ""; position: absolute; width: 100px; height: 100px; background-color: red; border-radius: 50%; } #heart:before { top: -50px; left: 0; } #heart:after { top: 0; left: 50px; } #message { position: absolute; top: 260px; left: 75px; font-family: cursive; font-size: 20px; color: white; text-shadow: 2px 2px 4px black; } </style> </head> <body> <div id="tree"> <div id="heart"></div> <div id="message">我爱你</div> </div> </body> </html> ``` 在上述代码中，我们使用了HTML5中的div元素和CSS样式来实现爱情树动画。通过设置不同的CSS属性，我们给心形元素添加了红色的背景，并旋转了45度，同时使用伪元素:before和:after分别创建了两个红色的半圆形，形成了完整的心形。最后，在心形下部位置添加了一段表白的文字消息。 你可以将上述代码复制到一个HTML文件中，并在浏览器中打开，即可看到一个简单的爱情树表白动画。你也可以根据自己的需求对代码进行修改和美化。 ### 回答2： 爱情树是一个基于HTML5技术实现的唯美表白动画代码。它采用了HTML5 Canvas元素和JavaScript代码实现了一个虚拟的“爱情树”效果。 实现这个效果的关键是使用Canvas元素绘制树的结构和动画效果。通过给定树的起始位置和长度，可以使用连续的线段和贝塞尔曲线来绘制树干和树枝，然后使用随机角度和长度绘制树叶。通过不断改变树的结构和参数，可以实现树的成长和动画效果。 在动画效果的实现中，可以利用JavaScript的动画函数（如requestAnimationFrame）来控制动画的播放速度和帧更新。通过不断改变树的结构和参数，并在每帧更新时重新绘制树，可以实现树的生长和运动的动画效果。 除了树的结构外，表白动画还可以添加其他元素，如心形图案、文字等，以增加表白的浪漫和唯美感。可以通过在Canvas上绘制心形图案，以及在指定位置渲染表白的文字，来实现这些效果。 总体来说，爱情树的实现代码相对较复杂，需要充分理解和运用HTML5的Canvas和JavaScript的动画函数。但通过一些基本的绘图和动画原理，结合一些随机参数和优雅的设计，可以实现一个唯美而浪漫的表白动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值