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

最新推荐文章于 2023-03-17 10:41:36 发布
最新推荐文章于 2023-03-17 10:41:36 发布
阅读量243 收藏
点赞数
文章标签： html5钟表带齿轮项目

一团网资讯

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

基于HTML5的齿轮动画特效

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

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

80249_0.jpg

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模拟齿轮动画
Dragon.G
06-09 2008
这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。HTML<html><head> <meta charset="gb2312"> <link href="css/zzsc.css
基于HTML5的齿轮动画特效
09-28
主要为大家详细介绍了基于HTML5的齿轮动画特效，该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，如何实现齿轮动画，感兴趣的小伙伴们可以参考一下
用css3实现一个简单的loading动画
不想翻身的咸鱼
04-25 943
在访问各种网站的时候我们经常会看到各式各样的加载动画，超级炫酷，有的是gif图片做成的，有的是svg做成的，有的是通过js控制dom做成的，在css3出现以后，好多都是纯css的，本着程序员造轮子的精神，自己决定用css实现自己网站的加载动画。效果如下（虽然不是很炫酷，嘿嘿） 下面我们开始动手，在开始前，我们分析一下这个动画是如何形成的 .最基本的旋转。 很明显6个白色圆点以半径r绕着中心...
html5轮滑效果,基于HTML5的齿轮动画特效
weixin_35866747的博客
06-03 278
#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+css3钟表网页特效
11-24
在“HTML5+CSS3钟表网页特效”这个主题中，我们将深入探讨如何利用这两项技术来实现一个实时显示时间的钟表界面。 HTML5作为最新的超文本标记语言版本，引入了许多新的元素和特性，旨在简化网页结构并增强其功能。...
HTML5 Canvas指针时钟表特效特效代码
04-18
这个“HTML5 Canvas指针时钟表特效特效代码”是一个利用Canvas API实现的交互式时钟示例，它可以为网页添加一个实时更新、直观且美观的时钟组件。 在Canvas中，我们主要通过JavaScript来操作画布，通过`<canvas>`...
HTML5 Canvas指针时钟表特效.zip
07-11
在这个“HTML5 Canvas指针时钟表特效”项目中，我们利用Canvas API构建了一个炫酷的时钟界面，适用于个性化博客或其他需要显示时间的网页。 首先，我们需要了解Canvas的基本结构。在HTML中，`<canvas>`元素提供了一...
html5 canvas绘制时钟表时间特效代码
03-20
在HTML5 Canvas上绘制时钟表时间特效，是利用Canvas API提供的各种绘图函数来模拟真实世界中的钟表行为，如指针转动、时间更新等，从而为网页增添动态视觉效果。 首先，我们需要理解Canvas的基本结构。HTML5的`...
html滚轮下拉动画,html5+css3齿轮滚动动画代码
weixin_32827773的博客
06-03 361
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...
一个简单的可控制转速的旋转齿轮html
最新发布
m0_53194930的博客
03-17 246
由input:[type=range]标签实现，滑条的值作为齿轮旋转的速度（每秒转n圈），图片每次都是以最初的状态为参考对象旋转的，而不是以最近一次的状态旋转。这是定时10毫秒的，与定时的10毫秒没大差距。这是定时一毫秒的，实际7,8毫秒才转一次。使用 js控制齿轮图片的css样式。
【哈理工实验二】HTML+CSS3 旋转齿轮特效
weixin_43899069的博客
04-03 820
实现效果： 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
HTML5画布齿轮
limeiyans喜欢编程的那些事
01-19 1033
很有意思的一个代码。 body { margin: 0px; padding: 0px; } window.requestAnimFrame = (function(callback) { return window.requestAnimat
html css齿轮滚动特效,纯CSS3实现的齿轮滚动动画
weixin_39950083的博客
06-04 329
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...
HTML绘制齿轮,HTML5模拟齿轮动画代码实例
weixin_39525617的博客
06-29 365
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:m...
HTML绘制齿轮,使用css3制作齿轮loading动画效果
weixin_39586395的博客
06-29 432
HTML首先在页面中引入font-awesome文件。然后在放置动画的位置加上HTML结构：CSS样式然后通过下面的CSS样式来制作齿轮的动画效果。#loader-wrapper {width: 60px;height: 60px;margin: auto;position: relative;}.loader{ position: absolute; }#loader1{color: #3A46...
HTML+CSS3 旋转齿轮特效
weixin_44592738的博客
12-01 1860
HTML+CSS3 旋转齿轮特效
html css齿轮滚动特效,CSS_纯CSS3实现滚动的齿轮动画效果，纯CSS写的齿轮效果。支持chrome - phpStudy...
weixin_42512441的博客
06-04 461
齿轮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;h...
CSS齿轮转动加载动画
qq_38862628的博客
12-15 824
CSS——齿轮转动加载动画 **前言：**该动画主要流程分为三块：绘制齿轮，齿轮转动动画，出场动画 绘制齿轮 绘制齿轮主要是使用svg进行绘制的 <svg class="guaongRudderOne"> <circle class="guaongRudderLine" cx="50" cy="50" r="40" fill="#fff"/> <line class="guaongRudderLine" x1="7" y1="25" x2="93" y2="75"
HTML字体动画特效代码分享
在这个例子中，我们看到的是一个利用JavaScript实现的HTML字体特效，它通过改变文本元素的位置来创造出一种类似钟表指针运动的效果。 首先，HTML部分设置了页面的基本结构，包括部分的字符编码设置（charset=gb2312...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值