效果大致如上图所示:由于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             &lt; HTML &gt;
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             &lt; CSS &gt;
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>