奥门新浦京官方网站HTML5模拟齿轮动画

本文由码农网 –
小峰原创,转载请看清文末的转发必要,应接出席大家的付费投稿安顿!

您心爱HTML5吧?小编想下边包车型客车那7个HTML5使用一定会让您爱上HTML5的,不相信就贰只来探视啊。

那是二个基于HTML5的齿轮动漫特效,大家将齿轮转动的物历史学原理,调换为HTML5代码,在网页上得以完成了仿照齿轮转动的动漫效果。该齿轮动漫的最大特点是它由许八个齿轮组成,那对齿轮传动的算法供给就大大提升了,并且大家并从未用JavaScript,而是纯CSS3达成的。

1、HTML5/jQuery雷达动漫图表 图表配置超级粗略

事情发生之前我们介绍过超多琳琅满指标HTML5图纸了,像那款HTML5折线图表Aristochart是风姿罗曼蒂克款很正确的折线图表,那款HTML5
Canvas饼状图表也十分帅。几眼前大家再来分享大器晚成款很特殊的HTML5图纸,它是采纳HTML5和jQuery的雷达动漫图表,图表数据在开头化的时候带有一定动漫。

奥门新浦京官方网站 1

在线演示 
   
  源码下载

奥门新浦京官方网站 2

2、HTML5模仿牛顿力学 碰撞的小球

采纳HTML5来模拟相当多大意实现都特别常有益,像此前介绍过的HTML5
Canvas正弦波动漫和HTML5大意实验
CSS3模拟齿轮转动。明天咱们又要介绍黄金年代款HTML5模仿物理实验,本次模拟的是HTML5Newton力学实验,高空挂多少个小球来回挥动,相互撞击,来模拟力的传动。

奥门新浦京官方网站 3

在线演示     
  源码下载

在线演示源码下载

3、HTML5 Canvas烟花特效 场景充裕富华

对此HTML5技术以来,Canvas应用非常广泛,基本上全数HTML5动画特效都会用到Canvas天性。昨日大家要享受后生可畏款基于HTML5
Canvas完结的焰火特效,我们只需在浅米灰的画布上点击鼠标,即会有可观的烟花怒放在夜空在那之中。

奥门新浦京官方网站 4

在线演示     
  源码下载

HTML代码

<div id="level">
    <div id="content">
        <div id="gears">
            <div id="gears-static"></div>
            <div id="gear-system-1">
                <div class="shadow" id="shadow15"></div>
                <div id="gear15"></div>
                <div class="shadow" id="shadow14"></div>
                <div id="gear14"></div>
                <div class="shadow" id="shadow13"></div>
                <div id="gear13"></div>
            </div>
            <div id="gear-system-2">
                <div class="shadow" id="shadow10"></div>
                <div id="gear10"></div>
                <div class="shadow" id="shadow3"></div>
                <div id="gear3"></div>
            </div>
            <div id="gear-system-3">
                <div class="shadow" id="shadow9"></div>
                <div id="gear9"></div>
                <div class="shadow" id="shadow7"></div>
                <div id="gear7"></div>
            </div>
            <div id="gear-system-4">
                <div class="shadow" id="shadow6"></div>
                <div id="gear6"></div>
                <div id="gear4"></div>
            </div>
            <div id="gear-system-5">
                <div class="shadow" id="shadow12"></div>
                <div id="gear12"></div>
                <div class="shadow" id="shadow11"></div>
                <div id="gear11"></div>
                <div class="shadow" id="shadow8"></div>
                <div id="gear8"></div>
            </div>
            <div class="shadow" id="shadow1"></div>
            <div id="gear1"></div>
            <div id="gear-system-6">
                <div class="shadow" id="shadow5"></div>
                <div id="gear5"></div>
                <div id="gear2"></div>
            </div>
            <div class="shadow" id="shadowweight"></div>
            <div id="chain-circle"></div>
            <div id="chain"></div>
            <div id="weight"></div>
        </div>
    </div>
</div>

4、jQuery轻量级网页编辑器 选中就可以编辑

如今流行的可视化网页编辑器相当多,像ckeditor、kindeditor、tinyeditor等,纵然效果都非常有力,不过体积都比较庞大,使用起来亦非很方便。后日大家大饱眼福黄金时代款基于jQuery的轻量级网页编辑器,它可怜轻快,选中内容就可以编辑,特别相符在比较轻松的编辑应用中。

奥门新浦京官方网站 5

在线演示     
  源码下载

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

在线演示源码下载

5、CSS3手风琴菜单 下拉开展带弹性动漫

接纳CSS3手艺能够完毕美妙绝伦的网页菜单,我们以前也在CSS3菜单栏目中享用了许多CSS3菜单。后天我们分享的那款是CSS3手风琴菜单,菜单项在拓宽和降低的时候菜单项会有弹性动漫效果。每风度翩翩层父级菜单有二个小三角,菜单项在進展的时候这么些小三角也会冒出动漫,非常的帅。

奥门新浦京官方网站 6

在线演示 
      源码下载

6、HTML5/CSS3 3D环形图片墙 伴随旋转动漫

我们大饱眼福过众多HTML5图形特效,富含HTML5图纸播放、HTML5图纸缩放等功用。几日前大家要享受一款基于HTML5/CSS3的3D环形图片墙,该HTML5图纸特效是一面3D立体的墙,墙上贴着一些图形,墙体在不停的旋转运动。鼠标滑过图片时,图片墙即结束转动,并将当选的图样放大。

奥门新浦京官方网站 7

在线演示 
   
  源码下载

7、HTML5 Canvas正弦波动画 可自定义波长和进程

正弦波大家很熟稔,以前数学和物理课上时临时会用到,还记得从前物理老师演示的正弦动漫照旧用flash制作的呢。今日我们要享受的那款HTML5
Canvas动画就和正弦波有关,大家能够稍微改良一下HTML5代码就可以定义波长、频率等正弦波的部分性质,十分帅吧。

奥门新浦京官方网站 8

在线演示 
   
  源码下载

怎么着,HTML5很给力吧,希望您也能投入HTML5的阵列,迎接关切@html5tricks获得更加的多HTML5选择和科目。

本文由html5tricks搜聚收拾,转发请务必保留最先的小说链接

发表评论

电子邮件地址不会被公开。 必填项已用*标注