1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Robert</title>
6 <link href="worker.css" rel="stylesheet" type="text/css">
7 <script src="worker.js"></script>
8 </head>
9 <body>
10 <div id="main">
11 <div class="hat"></div>
12 <div class="head">
13 <div class="eyes">
14 <div class="eye">
15 <div class="eye_ball"></div>
16 </div>
17 <div class="eye">
18 <div class="eye_ball"></div>
19 </div>
20 </div>
21 <div class="nose"></div>
22 <div class="mouse"></div>
23 </div>
24 <div class="neck"></div>
25 <div class="body">
26 <div class="hand_left"></div>
27 <div class="body_main"></div>
28 <div class="hand_right"></div>
29 </div>
30 <div class="legs">
31 <div class="leg_left"></div>
32 <div class="leg_right"></div>
33 </div>
34 <div class="foot">
35 <div class="foot_left"></div>
36 <div class="foot_right"></div>
37 </div>
38 </div>
39 </body>
40 </html>
worker.html
1#main{
2 position: relative;
3 width: 600px;
4 font-size:;
5 margin: 0 auto;
6 border: 1px solid transparent;
7 opacity: 0.2;
8 -webkit-transform-origin: 50% 20%;
9 -moz-transform-origin: 50% 20%;
10 -ms-transform-origin: 50% 20%;
11 -o-transform-origin: 50% 20%;
12 transform-origin: 50% 20%;
13 -webkit-transform: scale(0.3);
14 -moz-transform: scale(0.3);
15 -ms-transform: scale(0.3);
16 -o-transform: scale(0.3);
17 transform: scale(0.3);
18 -webkit-transition: -webkit-transform 2s linear,opacity 2s linear;
19 -moz-transition: -moz-transform 2s linear,opacity 2s linear;
20 -ms-transition: -ms-transform 2s linear,opacity 2s linear;
21 -o-transition: -o-transform 2s linear,opacity 2s linear;
22 transition: transform 2s linear,opacity 2s linear; }
23
24 #main .hat{
25 position: absolute;
26 width: 150px;
27 height: 80px;
28 background: #f66;
29 top:;
30 left: 50%;
31 margin-left: -75px;
32 border-radius: 70px 70px 0 0 ; }
33
34 #main .head{
35 width: 100px;
36 height: 100px;
37 background: rgb(255, 255, 104);
38 padding-top: 20px;
39 margin: 50px auto 0;
40 border-radius: 100px; }
41
42 #main .head .eyes{
43 width: 97px;
44 height: 30px;
45 margin: 10px auto;}
46
47 #main .head .eye{
48 display: inline-block;
49 width: 20px;
50 height: 20px;
51 background: #f00;
52 padding: 0 3px;
53 margin:0 10px;
54 border-radius: 30px;}
55
56 #main .head .eye_ball{
57 width: 15px;
58 height: 15px;
59 background: #1ac137;
60 margin: 2.5px auto;
61 border-radius: 15px;}
62
63 #main .head .eye,.eye_ball{
64 -webkit-transition: background 4s linear;
65 -moz-transition: background 4s linear;
66 -ms-transition: background 4s linear;
67 -o-transition: background 4s linear;
68 transition: background 4s linear; }
69
70 #main .head .nose{
71 width: 2px;
72 height: 10px;
73 background: rgb(155, 155, 194);
74 margin: 0 auto; }
75
76 #main .head .mouse{
77 width: 30px;
78 height: 10px;
79 background: rgba(224, 82, 82, 0.49);
80 margin: 10px auto 0;
81 border-radius: 5px 5px 20px 20px; }
82
83 #main .neck{
84 width: 40px;
85 height: 40px;
86 background: rgb(255, 255, 104);
87 margin: 0 auto; }
88
89 #main .body{
90 position: relative;
91 width: 280px;
92 height: 240px;
93 margin: 0 auto;
94 overflow: hidden;
95 border-radius: 80px 80px 10px 10px; }
96
97 #main .body .hand_left{
98 position: absolute;
99 top: 70px;
100 left:;
101 width: 45px;
102 height: 170px;
103 background: rgba(122, 12, 204, 0.5);
104 border-radius: 10px; }
105
106 #main .body_main{
107 width: 180px;
108 height: 240px;
109 margin: 0 auto;
110 background: rgba(122, 12, 204, 0.5);
111 border-radius: 80px 80px 10px 10px; }
112
113 #main .body .hand_right{
114 position: absolute;
115 top: 70px;
116 right:;
117 width: 45px;
118 height: 170px;
119 background: rgba(122, 12, 204, 0.5);
120 border-radius: 10px; }
121
122
123
124
125 #main .legs{
126 position: relative;
127 width: 150px;
128 height: 300px;
129 margin: 0 auto;
130 border-radius: 10px;}
131
132 #main .leg_left{
133 position: absolute;
134 top:;
135 left:;
136 width: 60px;
137 height: 300px;
138 background: rgb(117, 117, 43);
139 border-radius: 10px; }
140
141 #main .leg_right{
142 position: absolute;
143 top:;
144 right:;
145 width: 60px;
146 height: 300px;
147 background: rgb(117, 117, 43);
148 border-radius: 10px; }
149
150
151 #main .foot{
152 position: relative;
153 width: 190px;
154 height: 100px;
155 margin: 0 auto;
156 border-radius: 10px;}
157 #main .foot_left{
158 position: absolute;
159 top:;
160 left:;
161 width: 70px;
162 height: 30px;
163 background: rgb(255, 255, 104);
164 border-radius: 10px; }
165
166 #main .foot_right{
167 position: absolute;
168 top:;
169 right:;
170 width: 70px;
171 height: 30px;
172 background: rgb(255, 255, 104);
173 border-radius: 10px; }
worker.css
1 myReady(function(){
2 var main = document.getElementById('main'),
3 eye = getClassName('eye','main'),
4 eyeball = getClassName('eye_ball','main'),
5 bodyM = getClassName('body_main','main');
6
7
8 document.onmouseover = function(){
9 eye[0].style.background = 'rgba(146, 130, 158, 0.5)';
10 eye[1].style.background = 'rgba(146, 130, 158, 0.5)';
11 eyeball[0].style.background = '#000';
12 eyeball[1].style.background = '#000';
13 main.style.opacity = 1;
14 main.style.webkitTransform = 'scale('+0.6+','+ 0.7+')';
15 main.style.mozTransform = 'scale('+0.6+','+ 0.7+')';
16 main.style.msTransform = 'scale('+0.6+','+ 0.7+')';
17 main.style.oTransform = 'scale('+0.6+','+ 0.7+')';
18 main.style.transform = 'scale('+0.6+','+ 0.7+')';
19 }
20 })
21
22
23
24 //事件加载 —— 兼容IE低版本和其他浏览器
25 function myReady(fn){
26 if(document.addEventListener){
27 document.addEventListener('DOMContentLoaded',fn,false);
28 }else{
29 IEcontentLoaded(fn);
30 }
31 //兼容IE低版本
32 function IEcontentLoaded(fn){
33 var d = window.document;
34 var done = false;
35 var init =function(){
36 if(!done){
37 done = true;
38 fn();
39 }
40 };
41
42 (function(){
43 try{
44 d.documentElement.doScroll('left');
45 }catch(e){
46 setTimeout(arguments.callee,50)
47 return;
48 }
49 init();
50 })();
51
52 d.onreadystatechange = function(){
53 if(d.readyState == 'complete'){
54 d.onreadystatechange = null;
55 init();
56 }
57 }
58 }
59 }
60
61
62 //获取类名
63 function getClassName(name,parent){
64 var oParent = parent ? document.getElementById(parent) : document,
65 names = oParent.getElementsByTagName('*'),
66 ns = [];
67 for(var i=0; i<names.length; i++){
68 if(names[i].className == name){
69 ns.push(names[i]);
70 }
71 }
72 return ns;
73 }
worker.js