这是一个基于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,齿轮动画
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“基于HTML5的齿轮动画特效”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
20240901
20240901
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- [音展纪念碟]2006年《TAA台湾第十六届国际HI-ENDHI-FI音响展》2cd[WAV]
- 中国音乐地图之听见西藏山歌牧歌酒歌2020[WAV分轨]
- 王宏伟2017-永远的红飘带[太平洋影音][WAV+CUE]
- 费翔.1997-NOW现在【第一中国】【WAV+CUE】
- 新格合唱团.1981-我唱你和2辑(滚石新格民歌系列)【新格】【WAV+CUE】
- 陈柏宇.2011-QUINQUENNIUM【SONY】【WAV+CUE】
- 雨果唱片-《金唛系列-蔷薇依韵琼瑶》WAV
- 陈百强《凝望(2012华纳LPCD45限量版)[DMI]》[WAV整轨]
- 模拟之声慢刻CD《徐小凤45周年》[德国母带][低速原抓WAV+CUE]
- 《庄心妍 实力唱将 发烧音乐精选集》[WAV+CUE][380MB]
- 《王菲 单曲合集》[FlAC/分轨][520MB]
- 《费玉清 原味再现 水长流》[WAV+CUE][430MB]
- 群星.1992-畅销榜老歌金曲10CD【风格】【WAV+CUE】
- 孙悦.2024-时光音乐会【金蜂】【WAV+CUE】