你的位置:首页 > 网页设计

[网页设计][CSS3]会动的盒子机器人


[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>

View Code

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