html5轮滑效果,基于HTML5的齿轮动画特效

最新推荐文章于 2021-06-28 23:12:44 发布
最新推荐文章于 2021-06-28 23:12:44 发布
阅读量279 收藏
点赞数
文章标签： html5轮滑效果

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

}

#titleh1{

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

font-size:3.6em;

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

}

#titlep{

font-family:sans-serif;

font-size:1.2em;

line-height:148%;

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

}

.shadow{

-webkit-box-shadow:4px7px25px10pxrgba(43, 36, 0, 0.36);

-moz-box-shadow:4px7px25px10pxrgba(43, 36, 0, 0.36);

box-shadow:4px7px25px10pxrgba(43, 36, 0, 0.36);

}

/*gear-system-1*/

#gear15{

background:url(FgFnjks.png)no-repeat0 -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-repeat0 -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-repeat0 -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-repeat0 -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-repeat0 -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-371px0;

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

}

/*gear-system-5*/

#gear12{

background:url(FgFnjks.png)no-repeat0 -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-repeat0 -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*/

#gear1{

background:url(FgFnjks.png)no-repeat0 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;

}

/*gear-system-6*/

#gear5{

background:url(FgFnjks.png)no-repeat0 -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-repeat0 -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;

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*/

#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:2pxdotted#C8D94A;

position:absolute;

left:17px;

top:175px;

opacity:0.7;

-webkit-animation:collapse10000ms linear infinite alternate;

-moz-animation:collapse10000ms linear infinite alternate;

-ms-animation:collapse10000ms linear infinite alternate;

animation:collapse10000ms 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 {

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;

}

}

/*chain up and down*/

@keyframes"collapse"{

from {

height:387px;

}

to {

height:48px;

}

}

@-moz-keyframescollapse{

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的齿轮动画特效
09-28
主要为大家详细介绍了基于HTML5的齿轮动画特效，该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，如何实现齿轮动画，感兴趣的小伙伴们可以参考一下
html5轮滑效果,HTML5反重力动画特效
weixin_35837856的博客
06-03 218
JavaScript语言：JaveScriptBabelCoffeeScript确定class Polygon{constructor(svg, coordinates, friction){this.svg = svgthis.steps = ($(window).height())/2this.item = nullthis.friction = frictionthis.coordinate...
HTML5之转动的轮子
Fenice
02-26 1412
您的浏览器当前版本不支持canvas标签 Stop interval //获取画布DOM 还不可以操作 var canvas=document.getElementById('canvas'); //alert(canvas); //设置绘图环境 var
html+css轮滑式卡片
09-14
html+css轮滑式卡片
【哈理工实验二】HTML+CSS3 旋转齿轮特效
weixin_43899069的博客
04-03 822
实现效果： 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交互式轮滑小人加载特效.rar
最新发布
10-02
这个"HTML5交互式轮滑小人加载特效.rar"文件很可能包含了一个使用HTML5技术实现的动态加载效果，其中小人进行轮滑动作，以有趣的方式展示页面加载的进度。这种特效能够提升用户体验，吸引用户在等待内容加载时的注意...
轮滑鞋品牌企业网站模板是一款html5模板，适合滑冰溜冰鞋公司网站模板下载。.zip
02-18
"轮滑鞋品牌企业网站模板" 是本次讨论的核心，它是一个基于HTML5技术设计的网站模板，专为轮滑鞋或溜冰鞋的品牌企业所打造。这样的模板通常包含了一系列预设的页面布局、样式和交互元素，方便企业在搭建官方网站时...
HTML网页设计——轮滑运动体育类人物介绍主题12页面毕业设计网页
08-10
3. **多媒体元素**：包括GIF动画、视频、音频等，这些元素可以使网页更加生动有趣，提高用户的参与度。 4. **表单技术**：用于收集用户输入的信息，例如评论、注册等。表单的设计需要考虑到用户体验和数据验证的需求...
轮滑鞋品牌企业网站模板是一款html5模板，适合滑冰溜冰鞋公司网站模板下载 .rar
02-17
本文将深入探讨“轮滑鞋品牌企业网站模板”，它是一款基于HTML5技术的专业网站模板，特别适合滑冰溜冰鞋公司的在线展示需求。 首先，我们需要了解HTML5的重要性。作为最新一代的超文本标记语言，HTML5提供了更丰富...
图片轮滑的代码实现
07-01
安卓滑动图片的实现
HTML5拖动按钮齿轮动画切换特效特效代码
03-20
HTML5拖动按钮齿轮动画切换特效是一款有趣的HTML5特效，鼠标拖动左下角滑块并滑到滑槽右端右边会切换相应的内容，左边齿轮动画跟着转动内容切换代码。
js图片轮滑效果
01-29
js图片轮滑效果
网页设计，内还有常用图标文件，有轮滑，显示与隐藏，标签，输入框等基本效果的代码
11-05
有html，css文件，全部都有，还有JavaScript的代码，网页中有图片定时滑动，切换，图标的使用等
HTML5模拟齿轮动画
canglingyue的专栏
02-26 1055
这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用JavaScript，而是纯CSS3实现的。 在线演示   源码下载 HTML代码 1 2 3 4 5 6
html5钟表带齿轮项目,基于HTML5的齿轮动画特效
weixin_35452656的博客
06-28 244
一团网资讯一团资讯 > html5 > 基于HTML5的齿轮动画特效基于HTML5的齿轮动画特效2018-02-03 02:53:00 发布者：来源网络这是一个基于HTML5的齿轮动画特效，我们将齿轮转动的物理学原理，转换为HTML5代码，在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成，这对齿轮传动的算法要求就大大提高了，而且我们并没有用Java...
html css实现自动滑动的轮播图,CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）...
weixin_29079643的博客
06-01 3960
简单demo：使用HTML+CSS 实现轮播图(三张图为例，分别为：红、绿、蓝)的效果。实现效果：不能发视频，截图来代替吧示意图1.png示意图2.png示意图3.png实现思路使用 div+ul+li 的页面布局方式(div 的宽度和 li 的宽度相同)；在 ul 中横向排列5个 li 元素(ul 的宽度 >= 5个 li 元素的和)，排列顺序为 ：轮播图3--轮播图1--轮播图2--轮...
使用js实现图片轮滑效果
neal1991的专栏
10-21 2792
经常在购物网站，看到那种图片轮滑的效果，所以看到有人实现了，所以我也就学习下了。 首先贴出html代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document</title> <link rel="stylesheet" type="text/css" href="styl
体育运动网页设计：HTML静态页面毕业设计
这个设计采用了HTML5、CSS3以及JavaScript技术，实现了丰富的网页效果。网页设计的主题围绕着轮滑运动以及其他体育运动，如篮球、足球、游泳、乒乓球、网球等，适合用于展示校园体育活动和运动员信息。 设计特点： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值