[CSS3]会动的盒子机器人_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

[CSS3]会动的盒子机器人_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:46 AM

[PC与移动端皆可]会动的盒子机器人

浏览器必须可以解析perspective属性。

在线：http://wangxinsheng.herokuapp.com/boxMan

代码：

  1 <!DOCTYPE html>  2 <html>  3 <head>  4 <meta charset="UTF-8">  5 <title>[WXS]盒子机器人</title>  6 <meta name="author" content="WangXinsheng">  7 <meta name="apple-mobile-web-app-capable" content="yes">  8 <meta name="apple-mobile-web-app-status-bar-style" content="black">  9 <meta name="viewport" id="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable=no"> 10 <meta http-equiv="X-UA-Compatible" content="chrome=1"> 11 </head> 12 <style> 13 * { 14   -webkit-box-sizing: border-box; 15   -moz-box-sizing: border-box; 16   box-sizing: border-box; 17 } 18  19 body { 20   height: 10em; 21   left: 50%; 22   margin-left: -5em; 23   margin-top: -5em; 24   /*perspective:设置元素被查看位置的视图*/ 25   -webkit-perspective: 1000px; 26   -ms-perspective: 1000px; 27   perspective: 1000px; 28   /*perspective-origin/-webkit-perspective-origin:设置 3D 元素的基点位置*/ 29   position: absolute; 30   top: 50%; 31   width: 10em; 32 } 33 cube{ 34   position: absolute; 35   -webkit-transform-style: preserve-3d; 36   -ms-transform-style: preserve-3d; 37   transform-style: preserve-3d; 38   -webkit-transform: translateZ(-5em) rotateX(-20deg) rotateY(45deg); 39   transform: translateZ(-5em) rotateX(-20deg) rotateY(45deg); 40 } 41  42 cube * { 43 background-image: -webkit-radial-gradient(rgba(202,184,160,1),rgba(183,154,112,1)); 44   border: 2px solid rgba(183,154,112,1); 45   position: absolute; 46   display: block; 47 } 48  49 cube.header { 50   height: 8em; 51   width: 13em; 52   background:none; 53   border:none; 54   -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg); 55   transform: translateZ(0em) rotateX(0deg) rotateY(0deg); 56 } 57 cube.header back { 58   height: 8em; 59   width: 13em; 60   -webkit-transform: rotateX(180deg) translateZ(4em); 61   -ms-transform: rotateX(180deg) translateZ(4em); 62   transform: rotateX(180deg) translateZ(4em); 63 } 64  65 cube.header bottom { 66   height: 8em; 67   width: 13em; 68   -webkit-transform: rotateX(-90deg) translateZ(4em); 69   -ms-transform: rotateX(-90deg) translateZ(4em); 70   transform: rotateX(-90deg) translateZ(4em); 71   display:none; 72 } 73  74 cube.header front { 75   height: 8em; 76   width: 13em; 77   -webkit-transform: rotateY(0deg) translateZ(4em); 78   -ms-transform: rotateY(0deg) translateZ(4em); 79   transform: rotateY(0deg) translateZ(4em); 80   background:url('img/headerFront.png') no-repeat rgb(202,184,160); 81   -moz-background-size:cover; 82   -webkit-background-size:cover; 83   -o-background-size:cover; 84   background-size:cover; 85 } 86  87 cube.header left { 88   height: 8em; 89   width: 8em; 90   -webkit-transform: rotateY(-90deg) translateZ(4em); 91   -ms-transform: rotateY(-90deg) translateZ(4em); 92   transform: rotateY(-90deg) translateZ(4em); 93 } 94  95 cube.header right { 96   height: 8em; 97   width: 8em; 98   -webkit-transform: rotateY(90deg) translateZ(9em); 99   -ms-transform: rotateY(90deg) translateZ(9em);100   transform: rotateY(90deg) translateZ(9em);101 }102 103 cube.header top {104   height: 8em;105   width: 13em;106   -webkit-transform: rotateX(90deg) translateZ(4em);107   -ms-transform:rotateX(90deg) translateZ(4em);108   transform: rotateX(90deg) translateZ(4em);109 }110 /*------------------------------*/111 cube.body.body {112   height: 10em;113   width: 6em;114   background:none;115   border:none;116   -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);117   transform: translateZ(0em) rotateX(0deg) rotateY(0deg);118 }119 cube.body.body back {120   height: 10em;121   width: 6em;122   -webkit-transform: rotateX(180deg) translateZ(3em);123   -ms-transform: rotateX(180deg) translateZ(3em);124   transform: rotateX(180deg) translateZ(3em);125 }126 127 cube.body.body bottom {128   height: 6em;129   width: 6em;130   -webkit-transform: rotateX(-90deg) translateZ(7em);131   -ms-transform: rotateX(-90deg) translateZ(7em);132   transform: rotateX(-90deg) translateZ(7em);133 }134 135 cube.body.body front {136   height: 10em;137   width: 6em;138   -webkit-transform: rotateY(0deg) translateZ(3em);139   -ms-transform: rotateY(0deg) translateZ(3em);140   transform: rotateY(0deg) translateZ(3em);141   background-color:rgb(202,184,160,1);142   background:url('img/bodyFront.png') no-repeat rgb(202,184,160);;143   -moz-background-size:cover;144   -webkit-background-size:cover;145   -o-background-size:cover;146   background-size:cover;147 }148 149 cube.body.body left {150   height: 10em;151   width: 6em;152   -webkit-transform: rotateY(-90deg) translateZ(3em);153   -ms-transform: rotateY(-90deg) translateZ(3em);154   transform: rotateY(-90deg) translateZ(3em);155 }156 157 cube.body.body right {158   height: 10em;159   width: 6em;160   -webkit-transform: rotateY(90deg) translateZ(3em);161   -ms-transform: rotateY(90deg) translateZ(3em);162   transform: rotateY(90deg) translateZ(3em);163 }164 165 cube.body.body top {166   height: 6em;167   width: 6em;168   -webkit-transform: rotateX(90deg) translateZ(3em);169   -ms-transform: rotateX(90deg) translateZ(3em);170   transform: rotateX(90deg) translateZ(3em);171 }172 /*------------------------------*/173 cube.hand {174   height: 8em;175   width: 3em;176   background:none;177   border:none;178   -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);179   transform: translateZ(0em) rotateX(0deg) rotateY(0deg);180 }181 cube.hand back {182   height: 8em;183   width: 3em;184   -webkit-transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);185   -ms-transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);186   transform: rotateX(180deg) translateZ(1.5em) translateY(-3em);187 }188 189 cube.hand bottom {190   height: 3em;191   width: 3em;192   -webkit-transform: rotateX(-90deg) translateZ(9.5em);193   -ms-transform: rotateX(-90deg) translateZ(9.5em);194   transform: rotateX(-90deg) translateZ(9.5em);195 }196 197 cube.hand front {198   height: 8em;199   width: 3em;200   -webkit-transform: rotateY(0deg) translateZ(1.5em) translateY(3em);201   -ms-transform: rotateY(0deg) translateZ(1.5em) translateY(3em);202   transform: rotateY(0deg) translateZ(1.5em) translateY(3em);203 }204 205 cube.hand left {206   height: 8em;207   width: 3em;208   -webkit-transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);209   -ms-transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);210   transform: rotateY(-90deg) translateZ(1.5em) translateY(3em);211 }212 213 cube.hand right {214   height: 8em;215   width: 3em;216   -webkit-transform: rotateY(90deg) translateZ(1.5em) translateY(3em);217   -ms-transform: rotateY(90deg) translateZ(1.5em) translateY(3em);218   transform: rotateY(90deg) translateZ(1.5em) translateY(3em);219 }220 221 cube.hand top {222   height: 3em;223   width: 3em;224   -webkit-transform: rotateX(90deg) translateZ(-1.5em);225   -ms-transform: rotateX(90deg) translateZ(-1.5em);226   transform: rotateX(90deg) translateZ(-1.5em);227 }228 /*------------------------------*/229 cube.foot {230   height: 8em;231   width: 2.5em;232   background:none;233   border:none;234   -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);235   transform: translateZ(0em) rotateX(0deg) rotateY(0deg);236 }237 cube.foot back {238   height: 8em;239   width: 2.5em;240   -webkit-transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);241   -ms-transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);242   transform: rotateX(180deg) translateZ(2.75em) translateY(-3em);243 }244 245 cube.foot bottom {246   height: 5.5em;247   width: 2.5em;248   -webkit-transform: rotateX(-90deg) translateZ(8.2em);249   -ms-transform: rotateX(-90deg) translateZ(8.2em);250   transform: rotateX(-90deg) translateZ(8.2em);251 }252 253 cube.foot front {254   height: 8em;255   width: 2.5em;256   -webkit-transform: rotateY(0deg) translateZ(2.75em) translateY(3em);257   -ms-transform: rotateY(0deg) translateZ(2.75em) translateY(3em);258   transform: rotateY(0deg) translateZ(2.75em) translateY(3em);259 }260 261 cube.foot left {262   height: 8em;263   width: 5.5em;264   -webkit-transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);265   -ms-transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);266   transform: rotateY(-90deg) translateZ(2.7em) translateY(3em);267 }268 269 cube.foot right {270   height: 8em;271   width: 5.5em;272   -webkit-transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);273   -ms-transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);274   transform: rotateY(90deg) translateZ(-0.25em) translateY(3em);275 }276 277 cube.foot top {278   height: 5.5em;279   width: 2.5em;280   -webkit-transform: rotateX(90deg) translateZ(-0.25em);281   -ms-transform: rotateX(90deg) translateZ(-0.25em);282   transform: rotateX(90deg) translateZ(-0.25em);283 }284 /*------------------------------*/285 cube.dress {286   height: 3em;287   width: 6em;288   background:none;289   border:none;290   -webkit-transform: translateZ(0em) rotateX(0deg) rotateY(0deg);291   transform: translateZ(0em) rotateX(0deg) rotateY(0deg);292 }293 cube.dress back {294   height: 3em;295   width: 6em;296   -webkit-transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em);297   -ms-transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em);298   transform: rotateX(180deg) translateZ(2.0em) rotateX(-33deg) translateY(-3em);299 }300 301 cube.dress front {302   height: 3em;303   width: 6em;304   -webkit-transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em);305   -ms-transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em);306   transform: rotateY(0deg) translateZ(2.0em) rotateX(33deg) translateY(3em);307 }308 309 cube.dress left {310   height: 3em;311   width: 6em;312   -webkit-transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);313   -ms-transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);314   transform: rotateY(-90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);315 }316 317 cube.dress right {318   height: 3em;319   width: 6em;320   -webkit-transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);321   -ms-transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);322   transform: rotateY(90deg) translateZ(2.0em) rotateX(33deg) translateY(3em);323 }324 /*------------animate-------------*/325 /*--------------------*/326 .lHand{327     animation: lhand 2s infinite linear;328     -moz-animation: lhand 2s infinite linear;    /* Firefox */329     -webkit-animation: lhand 2s infinite linear;    /* Safari 和 Chrome */330     -webkit-animation-direction:alternate;331 }332 @keyframes lhand333 {334 from {335   transform: rotateX(-50deg) rotateZ(-5deg);336   }337 to {338   transform: rotateX(50deg) rotateZ(5deg);339   }340 }341 @-moz-keyframes lhand /* Firefox */342 {343 from {344   -moz-transform: rotateX(-50deg) rotateZ(-5deg);345   }346 to {347   -moz-transform: rotateX(50deg) rotateZ(5deg);348   }349 }350 @-webkit-keyframes lhand /* Safari 和 Chrome */351 {352 from {353   -webkit-transform: rotateX(-50deg) rotateZ(-5deg);354   }355 to {356   -webkit-transform: rotateX(50deg) rotateZ(5deg);357   }358 }359 /*--------------------*/360 .rHand{361     animation: rhand 2s infinite linear;362     -moz-animation: rhand 2s infinite linear;    /* Firefox */363     -webkit-animation: rhand 2s infinite linear;    /* Safari 和 Chrome */364     -webkit-animation-direction:alternate;365 }366 @keyframes rhand367 {368 from {369   transform: rotateX(50deg) rotateZ(5deg);370   }371 to {372   transform: rotateX(-50deg) rotateZ(-5deg);373   }374 }375 @-moz-keyframes rhand /* Firefox */376 {377 from {378   -moz-transform: rotateX(50deg) rotateZ(5deg);379   }380 to {381   -moz-transform: rotateX(-50deg) rotateZ(-5deg);382   }383 }384 @-webkit-keyframes rhand /* Safari 和 Chrome */385 {386 from {387   -webkit-transform: rotateX(50deg) rotateZ(5deg);388   }389 to {390   -webkit-transform: rotateX(-50deg) rotateZ(-5deg);391   }392 }393 /*--------------------*/394 .LFoot{395     animation: lfoot 2s infinite linear;396     -moz-animation: lfoot 2s infinite linear;    /* Firefox */397     -webkit-animation: lfoot 2s infinite linear;    /* Safari 和 Chrome */398     -webkit-animation-direction:alternate;399 }400 @keyframes lfoot401 {402 from {403   transform: rotateX(30deg) rotateZ(5deg);404   }405 to {406   transform: rotateX(-30deg) rotateZ(-5deg);407   }408 }409 @-moz-keyframes lfoot /* Firefox */410 {411 from {412   -moz-transform: rotateX(30deg) rotateZ(5deg);413   }414 to {415   -moz-transform: rotateX(-30deg) rotateZ(-5deg);416   }417 }418 @-webkit-keyframes lfoot /* Safari 和 Chrome */419 {420 from {421   -webkit-transform: rotateX(30deg) rotateZ(5deg);422   }423 to {424   -webkit-transform: rotateX(-30deg) rotateZ(-5deg);425   }426 }427 /*--------------------*/428 .rFoot{429     animation: rfoot 2s infinite linear;430     -moz-animation: rfoot 2s infinite linear;    /* Firefox */431     -webkit-animation: rfoot 2s infinite linear;    /* Safari 和 Chrome */432     -webkit-animation-direction:alternate;433 }434 @keyframes rfoot435 {436 from {437   transform: rotateX(-30deg) rotateZ(-5deg);438   }439 to {440   transform: rotateX(30deg) rotateZ(5deg);441   }442 }443 @-moz-keyframes rfoot /* Firefox */444 {445 from {446   -moz-transform: rotateX(-30deg) rotateZ(-5deg);447   }448 to {449   -moz-transform: rotateX(30deg) rotateZ(5deg);450   }451 }452 @-webkit-keyframes rfoot /* Safari 和 Chrome */453 {454 from {455   -webkit-transform: rotateX(-30deg) rotateZ(-5deg);456   }457 to {458   -webkit-transform: rotateX(30deg) rotateZ(5deg);459   }460 }461 /*--------------------*/462 .header{463     animation: header 3s infinite ease-out;464     -moz-animation: header 3s infinite ease-out;    /* Firefox */465     -webkit-animation: header 3s infinite ease-out;    /* Safari 和 Chrome */466     -webkit-animation-direction:alternate;467 }468 @keyframes header469 {470 from {471   transform: rotateX(-8deg) rotateY(-10deg);472   }473 to {474   transform: rotateX(8deg) rotateY(10deg);475   }476 }477 @-moz-keyframes header /* Firefox */478 {479 from {480   -moz-transform: rotateX(-8deg) rotateY(-10deg);481   }482 to {483   -moz-transform: rotateX(8deg) rotateY(10deg);484   }485 }486 @-webkit-keyframes header /* Safari 和 Chrome */487 {488 from {489   -webkit-transform: rotateX(-8deg) rotateY(-10deg);490   }491 to {492   -webkit-transform: rotateX(8deg) rotateY(10deg);493   }494 }495 /*--------------------*/496 .all{497     animation: all 8s infinite linear;498     -moz-animation: all 8s infinite linear;499     -webkit-animation: all 8s infinite linear;500     -webkit-animation-direction:alternate;501 }502 @keyframes all503 {504 from {505   transform: rotateY(20deg);506   }507 to {508   transform: rotateY(50deg);509   }510 }511 @-moz-keyframes all /* Firefox */512 {513 from {514   -moz-transform: rotateY(20deg);515   }516 to {517   -moz-transform: rotateY(50deg);518   }519 }520 @-webkit-keyframes all /* Safari 和 Chrome */521 {522 from {523   -webkit-transform: rotateY(20deg);524   }525 to {526   -webkit-transform: rotateY(50deg);527   }528 }529 </style>530 <body>531 <cube class="all" style=''>532     <cube class="header" style='top:-6em;left:-3.5em'>533       <back></back>534       <bottom></bottom>535       <front></front>536       <left></left>537       <right></right>538       <top></top>539     </cube>540     <cube class="body" style=''>541       <back></back>542       <bottom></bottom>543       <front></front>544       <left></left>545       <right></right>546       <top></top>547     </cube>548     <cube class="hand lHand" style='top:0.5em;left:-3.5em;'>549       <back></back>550       <bottom></bottom>551       <front></front>552       <left></left>553       <right></right>554       <top></top>555     </cube>556     <cube class="hand rHand" style='top:0.5em;left:6.5em;'>557       <back></back>558       <bottom></bottom>559       <front></front>560       <left></left>561       <right></right>562       <top></top>563     </cube>564     <cube class="foot LFoot" style='top:6.5em;left:0.25em;'>565       <back></back>566       <bottom></bottom>567       <front></front>568       <left></left>569       <right></right>570       <top></top>571     </cube>572     <cube class="foot rFoot" style='top:6.5em;left:3.25em;'>573       <back></back>574       <bottom></bottom>575       <front></front>576       <left></left>577       <right></right>578       <top></top>579     </cube>580     <cube class="dress" style='top:6em;left:0em;'>581       <back></back>582       <front></front>583       <left></left>584       <right></right>585     </cube>586 </cube>587     <script>588     </script>589 </body>590 </html>

rar：http://download.csdn.net/detail/wangxsh42/8565415

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract