蝙蝠岛资源网 Design By www.hbtsch.com
这是一个基于HTML5的齿轮动画特效,我们将齿轮转动的物理学原理,转换为HTML5代码,在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成,这对齿轮传动的算法要求就大大提高了,而且我们并没有用JavaScript,而是纯CSS3实现的。
HTML代码
XML/HTML Code复制内容到剪贴板- <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>
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);
- }
- /*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;
- 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;
- }
- /*gear-system-5*/
- #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*/
- #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;
- }
- /*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;
- 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: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 {
- 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-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,齿轮动画
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无基于HTML5的齿轮动画特效的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]