首页 > 代码库 > 看到一个不错的机器人笔记本看书的动画，就做了做
看到一个不错的机器人笔记本看书的动画，就做了做
效果大致如上图所示：由于PS技术不怎么精湛，能显示出大致效果，真正的html页面的效果要比这个gif图片好太多了。
上源码：
1 <!doctype html> 2 <html> 3 <head> 4 <title>纯css实现机器人看书</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 body,div{ 8 margin:0; 9 padding: 0; 10 } 11 body{ 12 background-color: #c93; 13 } 14 .bk{ 15 position: absolute; 16 width: 180px; 17 height: 160px; 18 } 19 .html{ 20 top:100px; 21 left: 300px; 22 } 23 .css{ 24 top:50px; 25 left: 600px; 26 } 27 .dot{ 28 position: absolute; 29 left: 90px; 30 width: 8px; 31 height: 8px; 32 border-radius: 4px; 33 background-color: #444; 34 } 35 .line{ 36 background-color: #444; 37 height: 2px; 38 width: 63px; 39 border:none; 40 position: absolute; 41 } 42 .degA{ 43 -webkit-transform:rotate(-45deg); 44 -webkit-transform-origin:top left; 45 -o-transform:rotate(-45deg); 46 -o-transform-origin:top left; 47 -ms-transform:rotate(-45deg); 48 -ms-transform-origin:top left; 49 -moz-transform:rotate(-45deg); 50 -moz-transform-origin:top left; 51 transform:rotate(-45deg); 52 transform-origin:top left; 53 top:45px; 54 left: 48px; 55 } 56 .degB{ 57 -webkit-transform:rotate(225deg); 58 -webkit-transform-origin:top left; 59 -o-transform:rotate(225deg); 60 -o-transform-origin:top left; 61 -ms-transform:rotate(225deg); 62 -ms-transform-origin:top left; 63 -moz-transform:rotate(225deg); 64 -moz-transform-origin:top left; 65 transform:rotate(225deg); 66 transform-origin:top left; 67 top:46px; 68 left: 138px; 69 } 70 .kk{ 71 position: absolute; 72 top:45px; 73 border:15px solid #444; 74 background-color: #EEE; 75 color: #888; 76 text-align: center; 77 font-weight: bold; 78 height: 85px; 79 width: 150px; 80 vertical-align: middle; 81 font-size: 20px; 82 line-height: 85px; 83 } 84 .boxbook{ 85 position: absolute; 86 top:400px; 87 left: 15px; 88 width: 100px; 89 height: 30px; 90 } 91 .book{ 92 background-color: #eee; 93 border:1px solid #555; 94 position: absolute; 95 width: 18px; 96 height: 18px; 97 bottom: 20px; 98 } 99 .b1{100 -webkit-transform:rotate(-30deg);101 -webkit-transform-origin:left bottom;102 -o-transform:rotate(-30deg);103 -o-transform-origin:left bottom;104 -ms-transform:rotate(-30deg);105 -ms-transform-origin:left bottom;106 -moz-transform-origin:left bottom;107 -moz-transform:rotate(-30deg);108 left: 25px;109 }110 .b2{111 -webkit-transform:rotate(-45deg);112 -webkit-transform-origin:left bottom;113 -o-transform:rotate(-45deg);114 -o-transform-origin:left bottom;115 -ms-transform:rotate(-45deg);116 -ms-transform-origin:left bottom;117 -moz-transform-origin:left bottom;118 -moz-transform:rotate(-45deg);119 left: 41px;120 }121 .b3{122 -webkit-transform:rotate(-45deg);123 -webkit-transform-origin:left bottom;124 -o-transform:rotate(-45deg);125 -o-transform-origin:left bottom;126 -ms-transform:rotate(-45deg);127 -ms-transform-origin:left bottom;128 -moz-transform-origin:left bottom;129 -moz-transform:rotate(-45deg);130 left: 53px;131 }132 .b4{133 -webkit-transform:rotate(10deg);134 -webkit-transform-origin:left bottom;135 -o-transform:rotate(10deg);136 -o-transform-origin:left bottom;137 -ms-transform:rotate(10deg);138 -ms-transform-origin:left bottom;139 -moz-transform-origin:left bottom;140 -moz-transform:rotate(10deg);141 left: 60px;142 }143 .boxHead{144 position: absolute;145 width:100px;146 border-top:5px solid #444;147 top:3px;148 }149 .boxBody{150 background-color: #555;151 left: 5px;152 width: 90px;153 height: 22px;154 border-bottom-left-radius: 80px;155 border-bottom-right-radius: 100px;156 position: absolute;157 }158 159 .boxMain{160 width: 600px;161 height: 166px;162 position: absolute;163 top:300px;164 left:200px;165 }166 .boxMain .deskTop{167 position: absolute;168 top:0;169 left: 0;170 padding-left: 50px;171 width: 550px;172 height: 100px;173 }174 .boxMain .deskTop .light{175 float: left;176 position: relative;177 width: 150px;178 height: 100px;179 }180 .light *{181 background-color: #eee;182 position: absolute;183 }184 .light .l1{185 border-top-left-radius: 15px;186 border-top-right-radius: 15px;187 bottom: 0;188 left: 20px;189 width: 40px;190 height: 20px;191 }192 .light .l2{193 bottom: 16px;194 left: 40px;195 width: 70px;196 height: 4px;197 -webkit-transform:rotate(-100deg);198 -ms-transform:rotate(-100deg);199 -o-transform:rotate(-100deg);200 -moz-transform:rotate(-100deg);201 -ms-transform-origin:left top;202 -o-transform-origin:left top;203 -moz-transform-origin:left top;204 -webkit-transform-origin:left top;205 }206 .light .l3{207 bottom: 80px;208 left: 26px;209 width: 90px;210 height: 4px;211 -webkit-transform:rotate(-15deg);212 -ms-transform:rotate(-15deg);213 -o-transform:rotate(-15deg);214 -moz-transform:rotate(-15deg);215 -ms-transform-origin:left top;216 -o-transform-origin:left top;217 -moz-transform-origin:left top;218 -webkit-transform-origin:left top;219 }220 .light .l4{221 bottom: 72px;222 left: 88px;223 width:50px;224 height: 25px;225 border-top-left-radius: 25px;226 border-top-right-radius: 25px;227 -webkit-transform:rotate(-15deg);228 -ms-transform:rotate(-15deg);229 -o-transform:rotate(-15deg);230 -moz-transform:rotate(-15deg);231 -ms-transform-origin:left top;232 -o-transform-origin:left top;233 -moz-transform-origin:left top;234 -webkit-transform-origin:left top;235 }236 .mouse{237 float: left;238 width: 20px;239 height: 100px;240 position: relative;241 }242 .mouse>div{243 position: absolute;244 bottom: 2px;245 left: 2px;246 height: 5px;247 width: 16px;248 background-color: #eee;249 border-top-left-radius: 3px;250 border-top-right-radius: 3px;251 }252 .mouse>div>div{253 position: absolute;254 background-color: #eee;255 width: 1px;256 height: 2px;257 top: 100%;258 }259 .mouse>div>div:nth-child(1){260 left: 2px;261 }262 .mouse>div>div:nth-child(2){263 right: 2px;264 }265 266 .robote{267 height: 100px;268 float: left;269 width: 200px;270 position: relative;271 padding:0 10px;272 }273 .robote .c1{274 left: 20px;275 position: absolute;276 top:-20px;277 width: 160px;278 height: 160px;279 border-radius: 80px;280 background-color: #444;281 }282 .robote .c2{283 top:-10px;284 position: absolute;285 left: 0;286 width: 200px;287 height: 200px;288 border-radius: 100px;289 background-color: #c93;290 }291 .robote .l_ear{292 position: absolute;293 left: 27px;294 top:10px;295 width: 15px;296 height: 30px;297 border-right: 3px solid #444;298 background-color: #eee;299 border-top-left-radius: 15px;300 border-bottom-left-radius: 15px;301 }302 .robote .r_ear{303 position: absolute;304 left: 155px;305 top:10px;306 width: 15px;307 height: 30px;308 border-left: 3px solid #444;309 background-color: #eee;310 border-top-right-radius: 15px;311 border-bottom-right-radius: 15px;312 }313 .robote .robote_head{314 position: absolute;315 left: 45px;316 width: 110px;317 height: 90px;318 border-radius: 55px;319 top:-10px;320 background-color: #eee;321 }322 .robote .robote_head li{323 display: block;324 position: absolute;325 background-color: #222;326 width: 6px;327 height: 6px;328 top:30px;329 border-radius: 3px;330 }331 332 @keyframes leye{333 0% {top:30px; left:35px;}334 20% {top:30px; left:20px;}335 40% {top:30px; left:50px;}336 60% {top:30px; left:35px;}337 80% {top:45px; left:35px;}338 100% {top:30px; left:35px;}339 }340 @-webkit-keyframes leye{341 0% {top:30px; left:35px;}342 20% {top:30px; left:20px;}343 40% {top:30px; left:50px;}344 60% {top:30px; left:35px;}345 80% {top:45px; left:35px;}346 100% {top:30px; left:35px;}347 }348 @keyframes reye{349 0% {top:30px; left:75px;}350 20% {top:30px; left:60px;}351 40% {top:30px; left:90px;}352 60% {top:30px; left:75px;}353 80% {top:45px; left:75px;}354 100% {top:30px; left:75px;}355 }356 @-webkit-keyframes reye{357 0% {top:30px; left:75px;}358 20% {top:30px; left:60px;}359 40% {top:30px; left:90px;}360 60% {top:30px; left:75px;}361 80% {top:45px; left:75px;}362 100% {top:30px; left:75px;}363 }364 .robote .robote_head li:nth-child(1){365 left: 35px;366 -webkit-animation:leye 8s linear 1s infinite normal;367 animation:leye 8s linear 1s infinite normal;368 }369 .robote .robote_head li:nth-child(2){370 left: 75px;371 -webkit-animation:reye 8s linear 1s infinite normal;372 animation:reye 8s linear 1s infinite normal;373 }374 375 .robote .robote_head .desklap{376 position: absolute;377 background-color: #EEE;378 width: 160px;379 height: 48px;380 top:60px;381 left: -24px;382 border-bottom: 4px solid #888;383 }384 .robote .robote_head .desklap div{385 position: absolute;386 left: 70px;387 top:14px;388 width: 14px;389 height: 14px;390 background-color: #fff;391 border-radius: 7px;392 }393 394 .desk{395 position: absolute;;396 top:101px;397 left: 0;398 width: 600px;399 height: 20px;400 border-top: solid #444 8px;401 }402 .desk>div{403 background-color: #eee;404 position: absolute;405 top:2px;406 width: 8px;407 height: 15px;408 }409 .desk .l_leg{410 left: 50px;411 }412 .desk .r_leg{413 right: 50px;414 }415 416 </style>417 </head>418 <body>419 <div class="bk html">420 <div class="dot"></div>421 <div class="line degA"></div>422 <div class="line degB"></div>423 <div class="kk">424 < HTML >425 </div>426 </div>427 <div class="bk css">428 <div class="dot"></div>429 <div class="line degA"></div>430 <div class="line degB"></div>431 <div class="kk">432 < CSS >433 </div>434 </div>435 <div class="boxbook">436 <div class="book b1"></div>437 <div class="book b2"></div>438 <div class="book b3"></div>439 <div class="book b4"></div>440 <div class="boxHead">441 <div class="boxBody"></div>442 </div>443 </div>444 <div class="boxMain">445 <div class="deskTop">446 <div class="light">447 <div class="l1"></div>448 <div class="l2"></div>449 <div class="l3"></div>450 <div class="l4"></div>451 </div>452 <div class="mouse">453 <div>454 <div></div>455 <div></div>456 </div>457 </div>458 <div class="robote">459 <div class="c1"></div>460 <div class="c2"></div>461 <div class="l_ear"></div>462 <div class="robote_head">463 <ul>464 <li></li>465 <li></li>466 </ul>467 <div class="desklap">468 <div></div>469 </div>470 </div>471 <div class="r_ear"></div>472 </div>473 </div>474 <div class="desk">475 <div class="l_leg"></div>476 <div class="r_leg"></div>477 </div>478 479 </div>480 </body>481 </html>
看到一个不错的机器人笔记本看书的动画，就做了做
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。