1-2 CSS3能做什么？
本节编程练习不计算学习进度，请电脑登录imooc.com操作

CSS3能做什么？

CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。

CSS3简化了前端开发工作人员的设计过程，加快页面载入速度。

CSS3都有哪些强大功能呢？各位小伙伴们先来一睹为快吧！

选择器
以前我们通常用class、 ID 或 tagname 来选择HTML元素，CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。

 

圆角效果
以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了 border-radius 帮你轻松搞定。

 

块阴影与文字阴影
可以对任意DIV和文字增加投影效果。

 

色彩
CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL ， CMYK ，HSLA and RGBA。

 

渐变效果
以前只能用Photoshop做出的图片渐变效果，现在可以用CCS写出来了。IE中的滤镜也可以实现。

 

个性化字体
网页上的字体太单一？使用@Font-Face 轻松实现定制字体。

 

多背景图
一个元素上添加多层背景图片。

 

边框背景图
边框应用背景图片。

 

变形处理
你可以对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画。

 

多栏布局
可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。

 

媒体查询
针对不同屏幕分辨率，应用不同的样式。

等等 ……

    很神奇吧！CSS3使代码更简洁、更高效。可以极大的提高工作效率，打造更高级的用户体验。使web应用的界面设计进入一个新的台阶。

    

任务

右侧的多拉A梦是几年某前端开发用CSS3实现的，当时并不支持3D变换等，经过改造，现在高级浏览器都能显示3D变换效果了。连国人的360浏览器都完美支持了。感叹技术发展之迅速！再不学习妹纸就跟别人跑啦！

修改styel.css中的27行-29行，让多拉A梦摇摆的更快一点吧。   

index.htmlstyle.css 
  1. <!doctype html>
  2. <html><head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  4. <title>CSS3-Demo</title>
  5. <link href="style.css" rel="stylesheet" type="text/css">
  6. </head>
  7. <body> 
  8.  
  9. <div id="stage">
  10. <div id="doraemon"> 
  11. 	<div id="face"> 
  12.     	<div id="head_light"></div> 
  13.     	<div id="eyes"> 
  14.     	<div class="eye eye_left"></div> 
  15.         	<div class="black_eye black_left"></div> 
  16.  
  17.       	<div class="eye eye_right"></div> 
  18.         	<div class="black_eye black_right"></div> 
  19.         </div> 
  20.         <div id="base"> 
  21. 			<div id="base_white"></div> 
  22. 				<div id="nose"> 
  23. 					<div id="nose_light"></div> 
  24. 				</div> 
  25.                 <div id="nose_line"></div> 
  26.                 <div id="mouth"></div> 
  27.                 <div id="mouth_rewrite"></div> 
  28.                 <div id="firefox_mouth"></div> 
  29.  
  30. 				<div class="whiskers whi_right_top rotate160"></div> 
  31. 				<div class="whiskers whi_right"></div> 
  32. 				<div class="whiskers whi_right_bottom rotate20"></div> 
  33.  
  34. 				<div class="whiskers whi_left_top rotate20"></div> 
  35. 				<div class="whiskers whi_left"></div> 
  36. 				<div class="whiskers whi_left_bottom rotate160"></div> 
  37.         </div> 
  38. 	</div> 
  39.     <div id="choker"> 
  40.     	<div id="belt"></div> 
  41.     	<div id="bell"> 
  42.        	  <div id="bell_line"></div> 
  43.             <div id="bell_circle"></div> 
  44.             <div id="bell_under"></div> 
  45. 		<div id="bell_light"></div> 
  46. 		</div> 
  47.     </div> 
  48. 	<div id="body"> 
  49.     <div id="doutai"></div> 
  50. 		<div class="base_white2 doutai_center"></div> 
  51.         		<div id="pocket"> 
  52.                 	<div id="circle"></div> 
  53.                     <div id="circle_rewrite"></div> 
  54.                 </div> 
  55. 	</div> 
  56. 	<div id="hand_right"> 
  57.     	<div id="arm_right"></div> 
  58. 		<div class="hand_circle hand_right"></div> 
  59. 		<div class="arm_rewrite_right"></div> 
  60.     </div> 
  61. 	<div id="hand_left"> 
  62.     	<div id="arm_left"></div> 
  63. 		<div class="hand_circle hand_left"></div> 
  64. 	  <div class="arm_rewrite_left"></div> 
  65.     </div> 
  66. 	<div id="foot"> 
  67.     	<div id="foot_left"></div> 
  68.         <div id="foot_right"></div> 
  69.         <div id="foot_rewrite"></div> 
  70.     </div> 
  71.     	<div id="shadow_doutai_arm"></div> 
  72.     	<div id="shadow_doutai_left"></div> 
  73.     	<div id="shadow_doutai_right"></div> 
  74.         <div id="shadow_belt"></div> 
  75. </div> 
  76. </div>
  77. </body>
  78. </html>
  1. body{
  2.     background:#fff;
  3.  
  4. }
  5.  
  6.  
  7. #stage{
  8.       -moz-perspective:500;   
  9.    -webkit-perspective:500;   
  10.        -ms-perspective:500;   
  11.    -moz-perspective-origin:0% 0%;    
  12. -webkit-perspective-origin:0% 0%;    
  13. 	}
  14.  
  15.  
  16. #doraemon{
  17. 	position:absolute;
  18. 	left:50px;
  19. 	top:50px;
  20. 		width:400px;
  21.   -webkit-transform-style: preserve-3d;
  22.      -moz-transform-style: preserve-3d;
  23. 	      transform-style: preserve-3d;
  24.   -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
  25.      -moz-transform: rotateX(0) rotateY(0) rotateZ(0);
  26.           transform: rotateX(0) rotateY(0) rotateZ(0);
  27.   -webkit-animation: run 5s infinite linear;
  28. 	 -moz-animation: run 5s infinite linear;
  29. 		  animation: run 5s infinite linear;
  30. }
  31.  
  32.  
  33. @-webkit-keyframes run {
  34.   0% {   -webkit-transform:rotateX(0) rotateY(0) rotatez(0) ;}
  35.   25% {  -webkit-transform:rotateX(30deg)  rotateY(30deg) rotatez(30deg) ; }
  36.   50% {  -webkit-transform:rotateX(0deg)  rotateY(0deg) rotatez(0) ; }
  37.   75% {  -webkit-transform:rotateX(-30deg)  rotateY(-30deg) rotatez(-30deg) ; }
  38.   100% { -webkit-transform:rotateX(0deg)  rotateY(0) rotatez(0) ; }
  39.  
  40. }
  41. @-moz-keyframes run {
  42.   0% {   -moz-transform:rotateX(0) rotateY(0) rotatez(0) ;}
  43.   25% {  -moz-transform:rotateX(30deg)  rotateY(30deg) rotatez(30deg) ; }
  44.   50% {  -moz-transform:rotateX(0deg)  rotateY(0deg) rotatez(0) ; }
  45.   75% {  -moz-transform:rotateX(-30deg)  rotateY(-30deg) rotatez(-30deg) ; }
  46.   100% { -moz-transform:rotateX(0deg)  rotateY(0) rotatez(0) ; }
  47. }
  48. @-ms-keyframes run {
  49.   0% {   -ms-transform:rotateX(0) rotateY(0) rotatez(0) ;}
  50.   25% {  -ms-transform:rotateX(30deg)  rotateY(30deg) rotatez(30deg) ; }
  51.   50% {  -ms-transform:rotateX(0deg)  rotateY(0deg) rotatez(0) ; }
  52.   75% {  -ms-transform:rotateX(-30deg)  rotateY(-30deg) rotatez(-30deg) ; }
  53.   100% { -ms-transform:rotateX(0deg)  rotateY(0) rotatez(0) ; }
  54. }
  55.  
  56. #instr{
  57. 	float:right;
  58. 	width:400px;
  59. 	font-size:14px;
  60. 	border-left:2px solid black;
  61. 	padding-left:20px;
  62. }
  63. #head_light{
  64. 	width:50px;
  65. 	height:50px;
  66. 	transform: rotate(20deg);
  67. 		-webkit-transform: rotate(20deg);
  68. 		-moz-transform: rotate(20deg);
  69. 		-o-transform: rotate(20deg);
  70. 	box-shadow:80px 20px 50px #fff;
  71. 		-webkit-box-shadow:80px 20px 55px #fff;
  72. 		-moz-box-shadow:80px 20px 50px #fff;
  73. 	border-radius:45px;
  74. 		-webkit-border-radius:45px;
  75. 		-moz-border-radius:60px;
  76. 	position:absolute;
  77. 	top:-20px;
  78. 	left:170px;
  79. 	opacity:0.5
  80. }
  81.  
  82. #face{
  83. 	position:relative;
  84. 	width:310px;
  85. 	height:300px;
  86. 	border-radius:146px;
  87. -webkit-border-radius:146px;
  88.    -moz-border-radius:146px;
  89. 	background:#07beea;	
  90. 	background: -webkit-gradient(linear, right top, left bottom, from(#fff) ,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95, #000), to(#444));	
  91. 	background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
  92. 	background-image: linear-gradient(to left bottom,#fff 0%,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%);
  93. 	border:#333 2px solid;
  94. 	top:-15px;
  95. 	box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
  96. 		-webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
  97. 		-moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
  98.  
  99. }
  100.  
  101. #base{
  102. 	position:relative;
  103. 	top:-5px;
  104. }
  105.  
  106. #base_white{
  107. 	position:absolute;
  108. 	border:#000 2px solid;
  109. 	width:264px;
  110. 	height:196px;
  111. 	border-radius: 150px 150px;
  112. 		-webkit-border-radius: 150px 150px;
  113. 		-moz-border-radius: 150px 150px;
  114. 	background:#FFF;
  115. 	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));	
  116. 	background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
  117.  
  118.  
  119. 	z-index:1;
  120. 	top:85px;
  121. 	left:22px;	
  122. }
  123.  
  124.  
  125. #eyes{
  126. 	position:relative;
  127. 	top:-5px;
  128. }
  129.  
  130. div.eye{
  131. 	position:absolute;
  132. 	border-radius: 35px 35px;
  133. 		-webkit-border-radius: 35px 35px;
  134. 		-moz-border-radius: 35px 35px;
  135. 	border:2px solid #000;
  136. 	width:72px;
  137. 	height:83px;
  138. 	z-index:20;
  139. 	background:#fff;
  140. }
  141.  
  142. div.black_eye{
  143. 	position:absolute;
  144. 	width:15px;
  145. 	height:15px;
  146. 	border-radius:10px;
  147. 		-webkit-border-radius:10px;
  148. 		-moz-border-radius:10px;
  149. 	background:#333;
  150. 	z-index:21;
  151.   -webkit-animation:cate 1s infinite linear;
  152.  
  153. }
  154.  
  155.  
  156.  
  157. @-webkit-keyframes cate{
  158. 	0%{
  159. 		margin:0 0 0 0;
  160. 	}
  161. 	80%	{
  162. 		margin:0px 0 0 0;
  163. 	}
  164. 	85%	{
  165. 		margin:-20px 0 0 0;
  166. 	}
  167. 	90%{
  168. 		margin:0 0 0 0;
  169. 	}
  170. 	93%{
  171. 		margin:0 0 0 7px;
  172. 	}
  173. 	96%{
  174. 		margin:0 0 0 10px;
  175. 	}
  176. 	100%{
  177. 		margin:0 0 0 4px;
  178. 	}
  179. }
  180.  
  181. @-moz-keyframes cate{
  182. 	0%{
  183. 		margin:0 0 0 0;
  184. 	}
  185. 	80%	{
  186. 		margin:0px 0 0 0;
  187. 	}
  188. 	85%	{
  189. 		margin:-20px 0 0 0;
  190. 	}
  191. 	90%{
  192. 		margin:0 0 0 0;
  193. 	}
  194. 	93%{
  195. 		margin:0 0 0 7px;
  196. 	}
  197. 	96%{
  198. 		margin:0 0 0 10px;
  199. 	}
  200. 	100%{
  201. 		margin:0 0 0 4px;
  202. 	}
  203. }
  204.  
  205. @-ms-keyframes cate{
  206. 	0%{
  207. 		margin:0 0 0 0;
  208. 	}
  209. 	80%	{
  210. 		margin:0px 0 0 0;
  211. 	}
  212. 	85%	{
  213. 		margin:-20px 0 0 0;
  214. 	}
  215. 	90%{
  216. 		margin:0 0 0 0;
  217. 	}
  218. 	93%{
  219. 		margin:0 0 0 7px;
  220. 	}
  221. 	96%{
  222. 		margin:0 0 0 10px;
  223. 	}
  224. 	100%{
  225. 		margin:0 0 0 4px;
  226. 	}
  227. }
  228.  
  229. div.black_left{
  230. 	top:100px;
  231. 	left:130px;
  232. }
  233.  
  234. div.black_right{
  235. 	top:100px;
  236. 	left:170px;
  237. }
  238.  
  239. div.eye_left{
  240. 	top:45px;
  241. 	left:82px;	
  242. }
  243.  
  244. div.eye_right{
  245. 	top:45px;
  246. 	left:156px;	
  247. }
  248.  
  249. #nose{
  250. 	width:32px;
  251. 	height:32px;
  252. 	border:2px solid #000;
  253. 	border-radius:50px;
  254. 		-webkit-border-radius:50px;
  255. 		-moz-border-radius:50px;
  256. 	background:#c93e00;
  257. 	position:absolute;
  258. 	top:117px;
  259. 	left:139px;
  260. 	z-index:30;
  261. }
  262.  
  263. #nose_light{
  264. 	width:10px;
  265. 	height:10px;
  266. 	border-radius:5px;
  267. 		-webkit-border-radius:5px;
  268. 		-moz-border-radius:5px;
  269. 	box-shadow:19px 8px 5px #fff;
  270. 		-webkit-box-shadow:19px 8px 5px #fff;
  271. 		-moz-box-shadow:19px 8px 5px #fff;
  272. 	position:relative;
  273. 	top:0px;
  274. 	left:0px;
  275. }
  276.  
  277. #nose_line{
  278. 	background:#000;
  279. 	width:4px;
  280. 	height:100px;
  281. 	top:125px;
  282. 	left:156px;
  283. 	position:absolute;
  284. }
  285.  
  286. #nose_line{
  287. 	background:#333;
  288. 	width:3px;
  289. 	height:100px;
  290. 	top:140px;
  291. 	left:155px;
  292. 	position:absolute;
  293. 		z-index:20;
  294. }
  295.  
  296. #mouth{
  297. 	width:240px;
  298. 	height:500px;
  299. 	border-bottom:3px solid #333;
  300. 	border-radius:120px;
  301. 		-webkit-border-radius:120px;
  302. 		-moz-border-radius:120px;
  303. 	position:absolute;
  304. 	top:-263px;
  305. 	left:36px;
  306. 	z-index:10;
  307. }
  308.  
  309. #mouth_rewrite{
  310. 	background:#fff;
  311. 	width:240px;
  312. 	height:90px;
  313. 	position:relative;
  314. 	top:115px;
  315. 	left:35px;
  316. 	z-index:12;
  317. 	border-radius:45px;
  318. 		-webkit-border-radius:45px;
  319. 		-moz-border-radius:60px;
  320. }
  321.  
  322. #firefox_mouth, x:-moz-broken, x:last-of-type, x:indeterminate {
  323. 	position:relative;
  324. 	width:170px;
  325. 	height:150px;
  326. 	-moz-border-radius:85px;
  327. 	z-index:11;
  328. 	top:-3px;
  329. 	left:70px;
  330. }
  331.  
  332. .whiskers{
  333. 	background:#333;
  334. 	height:2px;
  335. 	width:60px;
  336. 	position:absolute;
  337. 	z-index:20;
  338. }
  339. .whi_right{
  340. 	top:165px;
  341. 	left:210px;	
  342. }	
  343.  
  344. .whi_right_top{
  345. 	top:145px;
  346. 	left:210px;
  347. }	
  348.  
  349. .whi_right_bottom{
  350. 	top:185px;
  351. 	left:210px;
  352. }	
  353.  
  354. .whi_left{
  355. 	top:165px;
  356. 	left:50px;	
  357. }	
  358. .whi_left_top{
  359. 	top:145px;
  360. 	left:50px;
  361. }	
  362.  
  363. .whi_left_bottom{
  364. 	top:185px;
  365. 	left:50px;
  366. }
  367.  
  368. .rotate20{
  369. 	transform: rotate(20deg);
  370. 		-webkit-transform: rotate(20deg);
  371. 		-moz-transform: rotate(20deg);
  372. 		-o-transform: rotate(20deg);	
  373. }
  374.  
  375. .rotate160{
  376. 	transform: rotate(160deg);
  377. 		-webkit-transform: rotate(160deg);
  378. 		-moz-transform: rotate(160deg);
  379. 		-o-transform: rotate(160deg);	
  380. }
  381.  
  382. #choker{
  383. 	position:relative;
  384. 	top:-55px;
  385. 	left:35px;
  386. 	z-index:100;
  387. }
  388.  
  389. #belt{
  390. 	width:230px;
  391. 	height:20px;
  392. 	border:#000 solid 2px;
  393. 	background:#ca4100;
  394. 	background: -webkit-gradient(linear, left top, left bottom, from(#ca4100), to(#800400));	
  395. 	background: -moz-linear-gradient(top, #ca4100, #800400); 
  396. 	border-radius:10px;	
  397. 		-webkit-border-radius:10px;	
  398. 		-moz-border-radius:10px;
  399. 		position:relative;
  400. 	left:5px;
  401. }
  402.  
  403. #bell{
  404. 	width:40px;
  405. 	height:40px;
  406. 	border-radius:50px;
  407. 		-webkit-border-radius:50px;
  408. 		-moz-border-radius:50px;
  409. 	border:2px solid #000;
  410. 	background:#f9f12a;
  411. 	background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));	
  412. 	background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); 
  413. 	box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
  414. 		-webkit-box-shadow:-5px 3px 5px rgba(0,0,0,0.25);
  415. 		-moz-box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
  416. 	position:relative;
  417. 	top:-15px;
  418. 	left:100px;
  419. }
  420.  
  421. #bell_line{
  422. 	width:36px;
  423. 	height:2px;
  424. 	background:#f9f12a;
  425. 	border:#333 solid 2px;
  426. 	position:relative;
  427. 	top:10px;
  428. }
  429.  
  430. #bell_circle{
  431. 	width:12px;
  432. 	height:10px;
  433. 	border-radius:5px;
  434. 		-webkit-border-radius:5px;
  435. 		-moz-border-radius:5px;
  436. 	background:#000;
  437. 	position:relative;
  438. 	top:14px;
  439. 	left:14px;
  440. }
  441.  
  442. #bell_under{
  443. 	width:3px;
  444. 	height:15px;
  445. 	background:#000;
  446. 	position:relative;
  447. 	top:10px;
  448. 	left:18px;
  449. }
  450.  
  451. #bell_light{
  452. 	width:10px;
  453. 	height:10px;
  454. 	border-radius:10px;
  455. 		-webkit-border-radius:10px;
  456. 		-moz-border-radius:10px;
  457. 	box-shadow:19px 8px 5px #fff;
  458. 		-webkit-box-shadow:19px 8px 5px #fff;
  459. 		-moz-box-shadow:19px 8px 5px #fff;
  460. 	position:relative;
  461. 	opacity:0.7;
  462. 	top:-35px;
  463. 	left:5px;
  464. }
  465.  
  466. #doutai{
  467. 	position:absolute;
  468. 	width:220px;
  469. 	height:165px;
  470. 	background:#07beea;
  471. 	background: -webkit-gradient(linear, right top, left top, from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));	
  472. 	background: -moz-linear-gradient(right, #07beea, #0073b3 50%,#0096be 75%,#00b0e0 ,#0096be 100% ,#333 114%); 
  473. 	border:#333 2px solid;
  474. 	top:262px;
  475. 	left:46px;
  476. }
  477.  
  478. div.base_white2{
  479. 	position:absolute;
  480. 	width:170px;
  481. 	height:170px;
  482. 	border-radius:85px;
  483. 		-webkit-border-radius:85px;
  484. 		-moz-border-radius:85px;
  485. 	border:2px solid #000;
  486. 	background:#FFF;
  487. 	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));	
  488. 	background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
  489. }
  490.  
  491. .doutai_center{
  492. 	top:230px;
  493. 	left:72px;
  494. }
  495.  
  496. #circle{
  497. 	position:relative;
  498. 	width:130px;
  499. 	height:130px;
  500. 	border-radius:65px;
  501. 		-webkit-border-radius:65px;
  502. 		-moz-border-radius:65px;
  503. 	background:#fff;
  504. 	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));	
  505. 	background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff); 
  506. 	border:2px solid #000;
  507. 	top:-120px;
  508. 	left:92px;
  509. }
  510. #circle_rewrite{
  511. 	position:relative;
  512. 	width:134px;
  513. 	height:60px;
  514. 	background:#fff;	
  515. 	border-bottom:2px solid #000;
  516. 	top:-250px;
  517. 	left:92px;
  518. }
  519.  
  520. #hand_right{
  521. 	position:absolute;
  522. 	top:272px;
  523. 	left:248px;
  524. 	width:100px;
  525. 	height:100px;
  526. }
  527.  
  528. #arm_right{
  529. 	position:relative;
  530. 	width:80px;
  531. 	height:50px;
  532. 	background:#07beea;
  533. 	background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));	
  534. 	background: -moz-linear-gradient(top, #07beea, #07beea 85%, #555); 
  535.  
  536. 	border:solid 1px #000;
  537. 	z-index:-1;
  538. 	top:17px;
  539. 	transform: rotate(35deg);
  540. 		-webkit-transform: rotate(35deg);
  541. 		-moz-transform: rotate(35deg);
  542. 		-o-transform: rotate(35deg);
  543. 	box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
  544. 		-webkit-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
  545. 		-moz-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
  546. }
  547.  
  548. #hand_left{
  549. 	position:absolute;
  550. 	top:272px;
  551. 	left:-46px;
  552. 	width:100px;
  553. 	height:100px;
  554. }
  555.  
  556. #arm_left{
  557. 	position:relative;
  558. 	width:80px;
  559. 	height:50px;
  560. 	background:#0096be;
  561. 	border:solid 1px #000;
  562. 	z-index:-1;
  563. 	top:17px;
  564. 	left:36px;
  565. 	transform: rotate(145deg);
  566. 		-webkit-transform: rotate(145deg);
  567. 		-moz-transform: rotate(145deg);
  568. 		-o-transform: rotate(145deg);
  569. 	box-shadow:5px -7px 10px rgba(0,0,0,0.25);
  570. 		-webkit-box-shadow:5px -7px 10px rgba(0,0,0,0.25);
  571. 		-moz-box-shadow:5px -7px 10px rgba(0,0,0,0.25);
  572. }
  573.  
  574. div.hand_circle{
  575. 	position:absolute;
  576. 	width:60px;
  577. 	height:60px;
  578. 	border-radius:30px;
  579. 		-webkit-border-radius:30px;
  580. 		-moz-border-radius:30px;
  581. 	border:2px solid #000;
  582. 	background:#fff;
  583. 	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));	
  584. 	background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); 
  585. }
  586.  
  587. .hand_right{
  588. 	top:32px;
  589. 	left:40px;	
  590. }
  591.  
  592. .arm_rewrite_right{
  593. 	position:relative;
  594. 	width:4px;
  595. 	height:45px;
  596. 	background:#07beea;
  597. 	top:-51px;
  598. 	left:18px;
  599. }
  600.  
  601. .hand_left{
  602. 	top:34px;
  603. 	left:10px;	
  604. }
  605.  
  606. .arm_rewrite_left{
  607. 	position:relative;
  608. 	width:4px;
  609. 	height:50px;
  610. 	background:#0096be;
  611. 	top:-52px;
  612. 	left:92px;
  613. }
  614.  
  615.  
  616. #foot{
  617. 	position:relative;
  618. 	width:280px;
  619. 	height:40px;
  620. 	top:-141px;
  621. 	left:20px;
  622. }
  623.  
  624. #foot_left{
  625. 	width:125px;
  626. 	height:30px;
  627. 	background:#fff;
  628. 	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));	
  629. 	background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999); 
  630. 	border:solid 2px #333;
  631. 	border-top-left-radius:80px;
  632. 	border-bottom-left-radius:40px;
  633. 	border-top-right-radius:60px;
  634. 	border-bottom-right-radius:60px;
  635. 		-webkit-border-top-left-radius:80px;
  636. 		-webkit-border-bottom-left-radius:40px;
  637. 		-webkit-border-top-right-radius:60px;
  638. 		-webkit-border-bottom-right-radius:60px;
  639. 		-moz-border-radius-topleft:80px;
  640. 		-moz-border-radius-bottomleft:40px;
  641. 		-moz-border-radius-topright:60px;
  642. 		-moz-border-radius-bottomright:60px;
  643. 	position:relative;
  644. 	left:8px;
  645. 	top:2px;
  646. 	box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
  647. 		-webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
  648. 		-moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
  649. 	z-index:-1;
  650. }
  651.  
  652. #foot_right{
  653. 	position:relative;
  654. 	width:125px;
  655. 	height:30px;
  656. 	background:#fff;
  657. 	background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));	
  658. 	background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999); 
  659. 	border:solid 2px #333;
  660. 	border-top-left-radius:60px;
  661. 	border-bottom-left-radius:60px;
  662. 	border-top-right-radius:80px;
  663. 	border-bottom-right-radius:40px;
  664. 		-webkit-border-top-left-radius:60px;
  665. 		-webkit-border-bottom-left-radius:60px;
  666. 		-webkit-border-top-right-radius:80px;
  667. 		-webkit-border-bottom-right-radius:40px;
  668. 		-moz-border-radius-topleft:60px;
  669. 		-moz-border-radius-bottomleft:60px;
  670. 		-moz-border-radius-topright:80px;
  671. 		-moz-border-radius-bottomright:40px;
  672. 	top:-32px;
  673. 	left:141px;
  674. 	box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
  675. 		-webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
  676. 		-moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
  677. 	z-index:-1;
  678. }
  679.  
  680. #foot_rewrite{
  681. 	position:relative;
  682. 	width:20px;
  683. 	height:10px;
  684. 	background:#fff;
  685. 	background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));	
  686. 	background: -moz-linear-gradient(right top, #666, #fff 83%, #fff); 
  687. 	top:-76px;
  688. 	left:127px;
  689. 	border-top:2px solid #000;
  690. 	border-right:2px solid #000;
  691. 	border-left:2px solid #000;
  692. 	border-top-right-radius:40px;
  693. 	border-top-left-radius:40px;
  694. 		-webkit-border-top-right-radius:40px;
  695. 		-webkit-border-top-left-radius:40px;
  696. 		-moz-border-radius-topleft:40px;
  697. 		-moz-border-radius-topright:40px;
  698. }
  699.  
  700. #shadow_doutai_left{
  701. 	width:30px;
  702. 	height:200px;
  703. 	box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
  704. 		-webkit-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
  705. 		-moz-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
  706. 	position:absolute;
  707. 	top:250px;
  708. 	left:46px;
  709. 	z-index:-10;
  710. }
  711.  
  712. #shadow_doutai_right{
  713. 	width:30px;
  714. 	height:200px;
  715. 	box-shadow:10px 10px 15px rgba(0,0,0,0.35);
  716. 		-webkit-box-shadow:10px 10px 25px rgba(0,0,0,0.35);
  717. 		-moz-box-shadow:10px 10px 15px rgba(0,0,0,0.35);
  718. 	position:absolute;
  719. 	top:240px;
  720. 	left:230px;
  721. 	z-index:-10;
  722. }
  723.  
  724. #shadow_doutai_arm{
  725. 	width:85px;
  726. 	height:165px;
  727. 	box-shadow:-100px 10px 15px rgba(0,0,0,0.0);
  728. 		-webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
  729. 		-moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
  730. 	position:absolute;
  731. 	top:230px;
  732. 	left:113px;
  733. 	z-index:10;
  734. 	opacity:0.5;
  735. 	transform: rotate(-20deg);
  736. 		-webkit-transform: rotate(-20deg);
  737. 		-moz-transform: rotate(-20deg);
  738. 		-o-transform: rotate(-20deg);
  739. 	border-bottom-left-radius:40px;
  740. 		-webkit-border-bottom-left-radius:40px;
  741. 		-moz-border-radius-bottomleft:40px;
  742.  
  743. 	border-top-left-radius:20px;
  744. 		-webkit-border-top-left-radius:20px;
  745. 		-moz-border-radius-topleft:20px;
  746. }
  747.  
  748. #shadow_belt{
  749. 	width:40px;
  750. 	height:30px;
  751. 	box-shadow:-100px 10px 15px rgba(0,0,0,0);
  752. 		-webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
  753. 		-moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
  754. 	position:absolute;
  755. 	top:240px;
  756. 	left:130px;
  757. 	z-index:10;
  758. 	border-bottom-left-radius:40px;
  759. 		-webkit-border-bottom-left-radius:40px;
  760. 		-moz-border-radius-bottomleft:40px;
  761. 	z-index:300;
  762. }
  763.  
  764. #arm_left:not(\*|*), .arm_rewrite_left:not(\*|*){
  765. 	background:#07beea;
  766. }
  767.  
  768. #arm_left, .arm_rewrite_left{
  769. 	background:#07beea\9;
  770. 	*background:#07beea;
  771. 	_background:#07beea;
  772. }
  773.  
  774. #kiji{
  775. 	position:relative;
  776. 	top:-150px;
  777. }
下一节