CSS3实现小黄人

效果图：

代码如下，复制即可使用：

  1. <!DOCTYPE HTML>
  2. <HTML>
  3.  
  4.     <head>
  5.  
  6.     <title>CSS3实现小黄人</title>
  1.        <style>* { margin: 0; padding: 0;}
  2.  
  3. body {
  4.     position: relative;}
  5.  
  6. .container {width: 970px;margin: 0 auto;padding-top: 70px;transition: ease 0.3s all;
  7. -webkit-transition: ease 0.3s all;}
  8.  
  9. .container h1, h6 {text-align: center;color: #696969; font-family: tahoma;}
  10.  
  11. h6 {color:#BDBDBD; margin-bottom: 30px}
  12.  
  13. h6 a {text-decoration: none;color:#95A4B8;}
  14.  
  15. h6 a:hover {color:#6180A8;}
  16.  
  17. .bill {background: #f1cb48;
  18. background: -moz-linear-gradient(left,  #f1cb48 0%, #f9d65c 24%, #f9d65c 48%, #e6bc3b 99%);
  19. background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1cb48), color-stop(24%,#f9d65c), color-stop(48%,#f9d65c), color-stop(99%,#e6bc3b));
  20. background: -webkit-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
  21. background: -o-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
  22. background: -ms-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
  23. background: linear-gradient(to right,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
  24. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );
  25. ; width: 140px;height: 290px;
  26. border-radius: 70px;
  27. float: left;
  28. margin-left: 30px;
  29. position: relative;
  30. transition: ease 0.3s all;
  31. -webkit-transition: ease 0.3s all;
  32. }
  33.  
  34. .bill *, .jerry *, .evil * {position: absolute; box-sizing:content-box;
  35.     -moz-box-sizing:content-box;}
  36.  
  37. .glasses {background-color: rgba(0, 0, 0, 0);
  38. border: #949699 solid 11px;
  39. width: 57px;
  40. height: 57px;
  41. border-radius: 50%;
  42. top: 30px;
  43. left: 31px;
  44. z-index: 99;}
  45.  
  46. .eye_animate { width: 57px;
  47.     height: 0px;
  48.     border-radius: 31%;
  49.     background-color: #F9D65C;
  50.     top: 41px;
  51.     left: 42px;
  52.     z-index: 9;
  53.     animation: eyes_animation 1.5s ease 2s infinite;
  54.     -o-animation: eyes_animation 1.5s ease 2s infinite;
  55.     -moz-animation: eyes_animation 1.5s ease 2s infinite;
  56.     -webkit-animation: eyes_animation 1.5s ease 2s infinite;
  57. }
  58.  
  59. @-moz-keyframes eyes_animation
  60. {
  61. 0%   {height:0px;}
  62. 15% {height:57px;}
  63. 30% {height:0px;}
  64. 100% {height:0px;}
  65. }
  66.  
  67. @-webkit-keyframes eyes_animation
  68. {
  69. 0%   {height:0px;}
  70. 15% {height:57px;}
  71. 30% {height:0px;}
  72. 100% {height:0px;}
  73. }
  74.  
  75. @-o-keyframes eyes_animation
  76. {
  77. 0%   {height:0px;}
  78. 15% {height:57px;}
  79. 30% {height:0px;}
  80. 100% {height:0px;}
  81. }
  82.  
  83. @keyframes eyes_animation
  84. {
  85. 0%   {height:0px;}
  86. 15% {height:57px;}
  87. 30% {height:0px;}
  88. 100% {height:0px;}
  89. }
  90.  
  91. .yellow_part {width: 57px;
  92. height: 57px;
  93. background-color: #F9D65C;
  94. top: 11px;
  95. left: 11px;}
  96.  
  97. .white_part * {border-radius: 50%}
  98.  
  99. .white_part {width: 57px;
  100. border-radius: 50%;
  101. height: 48px;
  102. background-color: #FFF;
  103. top: 44px;
  104. left: 42px;
  105. box-shadow: 0 0 16px rgba(0, 0, 0, 0.3) inset;}
  106.  
  107. .brown_eye {background-color: #a87a51;width: 21px;
  108. height: 21px;
  109. top: 13px;
  110. right: 18px;}
  111.  
  112. .black_part {background-color: black;width: 8px;
  113. height: 8px;
  114. top: 6px;
  115. left: 6px;}
  116.  
  117. .black_part:after {background-color: #FFF;
  118. width: 3px;
  119. height: 3px;
  120. left: 1px;
  121. border-radius: 50%;
  122. position: absolute;
  123. content: '';
  124. -webkit-filter: blur(1px);
  125. -o-filter: blur(1px);
  126. }
  127.  
  128. .black_part:before {background-color: #FFF;
  129. width: 3px;
  130. height: 3px;
  131. left: 1px;
  132. border-radius: 50%;
  133. position: absolute;
  134. content: '';
  135. -webkit-filter: blur(1px);
  136. -o-filter: blur(1px);
  137. }
  138.  
  139. .black_tie {top: 61px;
  140. right: 0px;}
  141.  
  142. .right_tie {-webkit-transform: rotate(2deg);
  143.     -o-transform: rotate(2deg);
  144.     -ms-transform: rotate(2deg);
  145.     -moz-transform: rotate(2deg);
  146.     transform: rotate(2deg)}
  147.  
  148. .right_tie * {right: -3px;}
  149.  
  150. .top_tie {background-color: #3E3E3C;
  151. width: 28px;
  152. height: 8px;
  153. right: -2px;
  154. border-top-right-radius: 6px;
  155. border-bottom-right-radius: 2px;
  156. border: 1px solid #30302E;
  157. border-top-left-radius: 3px;}
  158.  
  159. .top_tie:after {background-color: #FFF;
  160. width: 5px;
  161. height: 10px;
  162. right: 25px;
  163. z-index: 9999;
  164. position: absolute;
  165. content: '';
  166. border-radius: 36%;
  167. border: 1px solid #30302E;
  168. bottom: -1px;}
  169.  
  170. .down_tie {background-color: #3E3E3C;
  171. width: 28px;
  172. height: 8px;
  173. right: -2px;
  174. top: 9px;
  175. border-top-right-radius: 2px;
  176. border-bottom-right-radius: 6px;
  177. border: 1px solid #30302E;
  178. border-top-left-radius: 2px;}
  179.  
  180. .down_tie:after {background-color: #FFF;
  181. width: 5px;
  182. height: 10px;
  183. right: 25px;
  184. z-index: 9999;
  185. position: absolute;
  186. content: '';
  187. border-radius: 36%;
  188. border: 1px solid #30302E;
  189. bottom: -2px;}
  190.  
  191. .left_tie {-webkit-transform: scaleX(-1) rotate(2deg);
  192.     -moz-transform: scaleX(-1) rotate(2deg);
  193.     -ms-transform: scaleX(-1) rotate(2deg);
  194.     -o-transform: scaleX(-1) rotate(2deg);
  195.     transform: scaleX(-1) rotate(2deg);
  196. right: 116px;}
  197.  
  198. .left_tie * {left: -3px;}
  199.  
  200. .clothes .main {background-color: #35668F;
  201. width: 80px;
  202. height: 67px;
  203. top: 193px;
  204. left: 29px;
  205. z-index: 99999;
  206. border-left: 1px dotted #FFF;
  207. border-right: 1px dotted #FFF;}
  208.  
  209. .clothes .main:before {content: '';
  210. position: absolute;
  211. background: #f1cb48;
  212. background: -moz-linear-gradient(right, #F1CB48 -11%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
  213. background: -webkit-gradient(linear, right top, left top, color-stop(-11%,#F1CB48), color-stop(24%,#F9D65C), color-stop(48%,#F9D65C), color-stop(109%,#E6BC3B));
  214. background: -webkit-linear-gradient(left, #F1CB48 -11%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
  215. background: -o-linear-gradient(right, #F1CB48 -11%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
  216. background: -ms-linear-gradient(right, #F1CB48 -11%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
  217. background: linear-gradient(to right, #F1CB48 -11%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
  218. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );
  219. width: 110px;
  220. border-radius: 50%;
  221. height: 57px;
  222. left: -14px;
  223. top: -49px;
  224. }
  225.  
  226. .clothes .main:after {content: '';
  227. position: absolute;
  228. width: 100px;
  229. background: #35668F;
  230. background: -moz-radial-gradient(top, ellipse cover, #35668f 57%, #003e82 120%);
  231. background: -webkit-gradient(radial, top center, 0px, top center, 100%, color-stop(57%,#35668f), color-stop(120%,#003e82));
  232. background: -webkit-radial-gradient(top, ellipse cover, #35668F 57%,#003E82 120%);
  233. background: -o-radial-gradient(top, ellipse cover, #35668f 57%,#003e82 120%);
  234. background: -ms-radial-gradient(top, ellipse cover, #35668f 57%,#003e82 120%);
  235. background: radial-gradient(ellipse at top, #35668F 57%,#003E82 120%);
  236. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35668f', endColorstr='#003e82',GradientType=1 );
  237. border-radius: 50%;
  238. height: 30px;
  239. left: -10px;
  240. top: 73px;}
  241.  
  242. .right_shirt {background-color: #35668F;
  243. width: 45px;
  244. height: 10px;
  245. top: 201px;
  246. left: 96px;
  247. border: 1px dotted #DDD;
  248. -webkit-transform: rotate(-13deg);
  249. -moz-transform: rotate(-13deg);
  250. -ms-transform: rotate(-13deg);
  251. -o-transform: rotate(-13deg);
  252. transform: rotate(-13deg);
  253. border-bottom-right-radius: 9px;
  254. z-index: 99999;}
  255.  
  256. .right_shirt:before {background-color: #000;
  257. height: 8px;
  258. width: 8px;
  259. left: 2px;
  260. position: absolute;
  261. content: '';
  262. border-radius: 50%;
  263. top: 1px;}
  264.  
  265. .right_shirt:after {background-color: #35668F;
  266. height: 2px;
  267. width: 2px;
  268. left: 5px;
  269. position: absolute;
  270. content: '';
  271. border-radius: 50%;
  272. top: 4px;}
  273.  
  274. .make_it_left {left: -2px;
  275. -webkit-transform: scaleX(-1) rotate(-13deg);
  276. -moz-transform: scaleX(-1) rotate(-13deg);
  277. -ms-transform: scaleX(-1) rotate(-13deg);
  278. -o-transform: scaleX(-1) rotate(-13deg);
  279. transform: scaleX(-1) rotate(-13deg);
  280. }
  281.  
  282. .clothes {z-index: 9999;}
  283.  
  284. .clothes .bottom {width: 142px;
  285. background: #35668F;
  286. background: -moz-radial-gradient(top, ellipse cover, #35668f 61%, #003e82 100%);
  287. background: -webkit-gradient(radial, top center, 0px, top center, 100%, color-stop(61%,#35668f), color-stop(100%,#003e82));
  288. background: -webkit-radial-gradient(top, ellipse cover, #35668F 61%,#003E82 100%);
  289. background: -o-radial-gradient(top, ellipse cover, #35668f 61%,#003e82 100%);
  290. background: -ms-radial-gradient(top, ellipse cover, #35668f 61%,#003e82 100%);
  291. background: radial-gradient(ellipse at top, #35668F 61%,#003E82 100%);
  292. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35668f', endColorstr='#003e82',GradientType=1 );
  293. filter: inherit;
  294. height: 50px;
  295. top: 240px;
  296. left: -1px;
  297. border-bottom-right-radius: 25px;
  298. border-bottom-left-radius: 26px;}
  299.  
  300. .clothes .bottom:before {content: '';
  301. position: absolute;
  302. width: 140px;
  303. border-radius: 50%;
  304. height: 34px;
  305. left: 0px;
  306. top: -19px;
  307. background: #f1cb48;
  308. background: -moz-linear-gradient(right, #F1CB48 0%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 99%);
  309. background: -webkit-gradient(linear, left top, right top, color-stop(0%,#F1CB48), color-stop(24%,#F9D65C), color-stop(48%,#F9D65C), color-stop(99%,#E6BC3B));
  310. background: linear-gradient(to right, #F1CB48 0%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 99%);
  311. background: -o-linear-gradient(right, #F1CB48 0%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 99%);
  312. background: -ms-linear-gradient(right, #F1CB48 0%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 99%);
  313. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );
  314. }
  315.  
  316. .smile {background-color: #000;
  317. border-radius: 50%;
  318. width: 79px;
  319. height: 37px;
  320. top: 114px;
  321. z-index: 99999;
  322. right: 31px;}
  323.  
  324. .smile:before {position: absolute;
  325. content: '';
  326. border-radius: 50%;
  327. width: 100px;
  328. height: 37px;
  329. top: -3px;
  330. right: -13px;
  331. background: #f1cb48;
  332. background: -moz-linear-gradient(right, #F1CB48 -40%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
  333. background: -webkit-gradient(linear, right top, left top, color-stop(-40%,#F1CB48), color-stop(24%,#F9D65C), color-stop(48%,#F9D65C), color-stop(109%,#E6BC3B));
  334. background: -webkit-linear-gradient(left, #F1CB48 -40%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
  335. background: -o-linear-gradient(right, #F1CB48 -40%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
  336. background: -ms-linear-gradient(right, #F1CB48 -40%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
  337. background: linear-gradient(to right, #F1CB48 -40%,#F9D65C 24%,#F9D65C 48%,#E6BC3B 109%);
  338. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );}
  339.  
  340. .legs {top: 285px}
  341.  
  342. .right_leg {background: #003e82;
  343. background: -moz-linear-gradient(top,  #003e82 0%, #35668f 40%);
  344. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#003e82), color-stop(40%,#35668f));
  345. background: -webkit-linear-gradient(top,  #003e82 0%,#35668f 40%);
  346. background: -o-linear-gradient(top,  #003e82 0%,#35668f 40%);
  347. background: -ms-linear-gradient(top,  #003e82 0%,#35668f 40%);
  348. background: linear-gradient(to bottom,  #003e82 0%,#35668f 40%);
  349. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003e82', endColorstr='#35668f',GradientType=0 );
  350. width: 45px;
  351. height: 38px;
  352. left: 73px;
  353. border-bottom-left-radius: 4px;}
  354.  
  355. .right_leg:before {position: absolute;
  356. content: '';
  357. border-radius: 50%;
  358. width: 40px;
  359. height: 73px;
  360. left: 28px;
  361. background-color: #FFF;
  362. top: 5px;}
  363.  
  364. .make_it_left_leg {left: 23px;
  365. -webkit-transform: scaleX(-1);
  366. -moz-transform: scaleX(-1)}
  367.  
  368. .shoes {background-color: #231F20;
  369. width: 45px;
  370. height: 9px;
  371. top: 36px;
  372. left: 74px;
  373. border-top-right-radius: 14px;
  374. -webkit-transform: rotate(2deg);
  375. -moz-transform: rotate(2deg);
  376. -ms-transform: rotate(2deg);
  377. -o-transform: rotate(2deg);
  378. transform: rotate(2deg);
  379. }
  380.  
  381. .shoes:after {position: absolute;
  382. content: '';
  383. border-top-right-radius: 30%;
  384. width: 30px;
  385. height: 6px;
  386. background-color: #231F20;
  387. top: 8px;
  388. right: 0px;
  389. border-bottom-right-radius: 31%;
  390. border-bottom-left-radius: 50%;
  391. -webkit-transform: rotate(2deg);
  392. -moz-transform: rotate(2deg);
  393. -ms-transform: rotate(2deg);
  394. -o-transform: rotate(2deg);
  395. transform: rotate(2deg);
  396. }
  397.  
  398. .shoes:before {position: absolute;
  399. content: '';
  400. width: 9px;
  401. height: 6px;
  402. background-color: #231F20;
  403. top: 6px;
  404. left: 0px;
  405. border-bottom-right-radius: 40%;
  406. }
  407.  
  408. .small_shoes {
  409. border-radius: 40%;
  410. width: 30px;
  411. height: 10px;
  412. background-color: #231F20;
  413. top: -4px;
  414. right: 4px;
  415. -webkit-transform: rotate(9deg);
  416. -moz-transform: rotate(9deg);
  417. -ms-transform: rotate(9deg);
  418. -o-transform: rotate(9deg);
  419. transform: rotate(9deg);
  420. }
  421.  
  422. .small_shoes:before {position: absolute;
  423. content: '';
  424. width: 18px;
  425. height: 6px;
  426. background-color: #35668F;
  427. top: -1px;
  428. left: -1px;
  429. -webkit-transform: rotate(-12deg) !important;
  430. -moz-transform: rotate(-12deg) !important;
  431. -ms-transform: rotate(-12deg) !important;
  432. -o-transform: rotate(-12deg) !important;
  433. transform: rotate(-12deg) !important;
  434. border-bottom-right-radius: 4px;
  435. }
  436.  
  437. .make_it_left_shoes {left: 22px;
  438. -webkit-transform: scaleX(-1);
  439. -moz-transform: scaleX(-1);
  440. -ms-transform: scaleX(-1);
  441. -o-transform: scaleX(-1);
  442. transform: scaleX(-1)
  443. }
  444.  
  445. .arm {width: 77px;
  446. height: 89px;
  447. background: #f1cb48;
  448. background: -moz-linear-gradient(-45deg,   #F1CB48 0%,#F9D65C 24%,#E6BC3B 99%);
  449. background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#F1CB48), color-stop(24%,#F9D65C), color-stop(99%,#E6BC3B));
  450. background: -webkit-linear-gradient(-45deg,   #F1CB48 0%,#F9D65C 24%,#E6BC3B 99%);
  451. background: -o-linear-gradient(-45deg,  #F1CB48 0%,#F9D65C 24%,#E6BC3B 99%);
  452. background: -ms-linear-gradient(-45deg,  #F1CB48 0%,#F9D65C 24%,#E6BC3B 99%);
  453. background: linear-gradient(135deg, #F1CB48 0%,#F9D65C 24%,#E6BC3B 99%);
  454. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );
  455.  
  456. top: 192px;
  457. border-bottom-left-radius: 11px;
  458. border-top-left-radius: 55px;
  459. z-index: 5555;
  460. -webkit-transform: rotate(27deg);
  461. -moz-transform: rotate(27deg);
  462. -ms-transform: rotate(27deg);
  463. -o-transform: rotate(27deg);
  464. transform: rotate(27deg);
  465. left: -12px;}
  466.  
  467. .arm:before {position: absolute;
  468. content: '';
  469. width: 36px;
  470. height: 19px;
  471. background-color: #F3CF55;
  472. top: 76px;
  473. left: -7px;
  474. -webkit-transform: rotate(69deg);
  475. -moz-transform: rotate(69deg);
  476. -ms-transform: rotate(69deg);
  477. -o-transform: rotate(69deg);
  478. transform: rotate(69deg);
  479. border-bottom-left-radius: 19px;
  480. border-bottom-right-radius: 9px;
  481. }
  482.  
  483. .arm:after {position: absolute;
  484. content: '';
  485. width: 52px;
  486. height: 16px;
  487. background-color: #FFF;
  488. top: 73px;
  489. left: 0px;
  490. -webkit-transform: rotate(72deg);
  491. -moz-transform: rotate(72deg);
  492. -ms-transform: rotate(72deg);
  493. -o-transform: rotate(72deg);
  494. transform: rotate(72deg);
  495. border-radius: 50%;
  496. }
  497.  
  498. .hand {width: 19px;
  499. height: 11px;
  500. background-color: #231F20;
  501. left: -28px;
  502. top: 270px;
  503. z-index: 99999;
  504. border-bottom-left-radius: 8px;
  505. border-bottom-right-radius: 8px;
  506. -webkit-transform: rotate(4deg);
  507. -moz-transform: rotate(4deg);
  508. -ms-transform: rotate(4deg);
  509. -o-transform: rotate(4deg);
  510. transform: rotate(4deg);
  511. }
  512.  
  513. .hand:before {width: 27px;
  514. position: absolute;
  515. content: '';
  516. height: 25px;
  517. background-color: #231F20;
  518. left: 4px;
  519. top: 4px;
  520. border-bottom-left-radius: 10px;
  521. border-bottom-right-radius: 0px;
  522. border-top-left-radius: 3px;
  523. border-top-right-radius: 18px;
  524. -webkit-transform: rotate(-17deg);
  525. -moz-transform: rotate(-17deg);
  526. -ms-transform: rotate(-17deg);
  527. -o-transform: rotate(-17deg);
  528. transform: rotate(-17deg);
  529. }
  530.  
  531. .hand:after {width: 14px;
  532. position: absolute;
  533. content: '';
  534. height: 14px;
  535. background-color: #231F20;
  536. left: 7px;
  537. top: 21px;
  538. border-radius: 50%;
  539. }
  540.  
  541. .hand_parts {width: 16px;
  542. height: 16px;
  543. background-color: #231F20;
  544. left: 19px;
  545. top: 21px;
  546. border-radius: 47%;}
  547.  
  548. .hand_parts:after {
  549. position: absolute;
  550. content: '';
  551. width: 16px;
  552. height: 16px;
  553. background-color: #231F20;
  554. left: 1px;
  555. top: -11px;
  556. border-radius: 47%;
  557. }
  558.  
  559. .make_it_right_arm {left: 57px;
  560. -webkit-transform: scaleX(-1);
  561. -moz-transform: scaleX(-1);
  562. -ms-transform: scaleX(-1);
  563. -o-transform: scaleX(-1);
  564. transform: scaleX(-1);
  565. top: 186px;
  566. height: 92px;
  567. z-index: -1;
  568. border-left: 14px #E6BC3B solid;}
  569.  
  570. .make_it_right_hand {left: 137px;
  571. top: 266px;
  572. z-index: 7777;
  573. -webkit-transform: scaleX(-1) rotate(27deg);
  574. -moz-transform: scaleX(-1) rotate(27deg);
  575. -ms-transform: scaleX(-1) rotate(27deg);
  576. -o-transform: scaleX(-1) rotate(27deg);
  577. transform: scaleX(-1) rotate(27deg);}
  578.  
  579. .hair1 {background-color: rgba(0, 0, 0, 0);
  580. width: 25px;
  581. height: 48px;
  582. top: -37px;
  583. border-radius: 53%;
  584. border-bottom-left-radius: 3px;
  585. border-left: solid #000 1px;
  586. left: 75px;
  587. -webkit-transform: rotate(8deg);
  588. -moz-transform: rotate(8deg);
  589. -ms-transform: rotate(8deg);
  590. -o-transform: rotate(8deg);
  591. transform: rotate(8deg);
  592. }
  593.  
  594. .hair1:after {background-color: rgba(0, 0, 0, 0);
  595. position: absolute;
  596. content: '';
  597. width: 25px;
  598. height: 35px;
  599. top: 14px;
  600. border-radius: 43%;
  601. border-bottom-left-radius: 1px;
  602. border-left: solid #000 1px;
  603. left: 1px;
  604. -webkit-transform: rotate(4deg);
  605. -moz-transform: rotate(4deg);
  606. -ms-transform: rotate(4deg);
  607. -o-transform: rotate(4deg);
  608. transform: rotate(4deg);}
  609.  
  610. .hair1:before {background-color: rgba(0, 0, 0, 0);
  611. position: absolute;
  612. content: '';
  613. width: 25px;
  614. height: 29px;
  615. top: 21px;
  616. border-radius: 43%;
  617. border-bottom-left-radius: 1px;
  618. border-left: solid #000 1px;
  619. left: 3px;
  620. -webkit-transform: rotate(11deg);
  621. -moz-transform: rotate(11deg);
  622. -ms-transform: rotate(11deg);
  623. -o-transform: rotate(11deg);
  624. transform: rotate(11deg);}
  625.  
  626. .make_it_left_hair1 {left: 44px;
  627. -webkit-transform: scaleX(-1) rotate(13deg);
  628. -moz-transform: scaleX(-1) rotate(13deg);
  629. -ms-transform: scaleX(-1) rotate(13deg);
  630. -o-transform: scaleX(-1) rotate(13deg);
  631. transform: scaleX(-1) rotate(13deg);}
  632.  
  633. .hair2 {background-color: rgba(0, 0, 0, 0);
  634. width: 25px;
  635. height: 48px;
  636. top: -43px;
  637. border-radius: 43%;
  638. border-bottom-left-radius: 3px;
  639. border-left: solid #000 1px;
  640. left: 73px;
  641. -webkit-transform: rotate(5deg);
  642. -moz-transform: rotate(5deg);
  643. -ms-transform: rotate(5deg);
  644. -o-transform: rotate(5deg);
  645. transform: rotate(5deg);}
  646.  
  647. .hair2:before {background-color: rgba(0, 0, 0, 0);
  648. width: 25px;
  649. position: absolute;
  650. content: '';
  651. height: 48px;
  652. border-radius: 43%;
  653. border-bottom-left-radius: 3px;
  654. border-left: solid #000 1px;
  655. left: -29px;
  656. -webkit-transform: scaleX(-1) rotate(15deg);
  657. -moz-transform: scaleX(-1) rotate(15deg);
  658. -ms-transform: scaleX(-1) rotate(15deg);
  659. -o-transform: scaleX(-1) rotate(15deg);
  660. transform: scaleX(-1) rotate(15deg);}
  661.  
  662. .blue_borders {background-color: #35668F;
  663. width: 89px;
  664. height: 79px;
  665. top: 180px;
  666. left: 26px;
  667. z-index: 2;}
  668.  
  669. .blue_borders:before {position: absolute;
  670. content: '';
  671. background-color: #35668F;
  672. width: 91px;
  673. height: 17px;
  674. border-bottom-right-radius: 9px;
  675. -webkit-transform: rotate(-13deg);
  676. -moz-transform: rotate(-13deg);
  677. -ms-transform: rotate(-13deg);
  678. -o-transform: rotate(-13deg);
  679. transform: rotate(-13deg);
  680. top: 24px;
  681. left: 25px;
  682. }
  683.  
  684. .blue_borders:after {position: absolute;
  685. content: '';
  686. background-color: #35668F;
  687. width: 91px;
  688. height: 17px;
  689. border-bottom-left-radius: 9px;
  690. -webkit-transform: rotate(13deg);
  691. -moz-transform: rotate(13deg);
  692. -ms-transform: rotate(13deg);
  693. -o-transform: rotate(13deg);
  694. transform: rotate(13deg);
  695. top: 24px;
  696. left: -27px;}
  697.  
  698. .white_light {width: 5px;
  699. height: 43px;
  700. left: 35px;
  701. background-color: #FFFFFF;
  702. opacity: 0.2;
  703. top: 2px;
  704. border-radius: 50%;
  705. -moz-box-shadow: 0px 3px 9px 8px rgba(0,0,0,1);
  706. box-shadow: 0px 3px 10px 8px #FFFFFF;
  707. -webkit-transform: rotate(49deg);
  708. -moz-transform: rotate(49deg);
  709. -ms-transform: rotate(49deg);
  710. -o-transform: rotate(49deg);
  711. transform: rotate(49deg);
  712. }
  713.  
  714. .dark_light {
  715. width: 7px;
  716. height: 50px;
  717. top: 10px;
  718. left: 105px;
  719. background-color: #cd9f08;
  720. opacity: 0.2;
  721. border-radius: 50%;
  722. -moz-box-shadow: 0px 3px 10px 8px rgba(0,0,0,1);
  723. box-shadow: 0px 3px 10px 8px #cd9f08;
  724. -webkit-transform:rotate(-42deg);
  725.    -moz-transform:rotate(-42deg);
  726.     -ms-transform:rotate(-42deg);
  727.      -o-transform:rotate(-42deg);
  728.         transform:rotate(-42deg);
  729. }
  730.  
  731. .pocket {width: 40px;
  732. height: 37px;
  733. background-color: #245580;
  734. top: 215px;
  735. z-index: 99999;
  736. left: 49px;
  737. -moz-box-shadow: 0px 0px 3px 0px rgba(19,54,82,1);
  738. box-shadow: 0px 0px 3px 0px #133652;
  739. border-bottom-left-radius: 20px;
  740. border-bottom-right-radius: 20px;
  741. border: 1px dotted #B6B6B6;}
  742.  
  743. .pocket:after {width: 43px;
  744. height: 15px;
  745. position: absolute;
  746. content: '';
  747. top: -9px;
  748. left: -1px;
  749. border-radius: 50%;
  750. background-color: #35668F;
  751. border-bottom: 1px dotted #B6B6B6;}
  752.  
  753. .logo {background-color: #231F20;
  754. width: 19px;
  755. height: 19px;
  756. border-radius: 50%;
  757. top: 11px;
  758. right: 10px;}
  759.  
  760. .logo:before {position: absolute;
  761. content: '';
  762. background-color: #245580;
  763. width: 9px;
  764. height: 9px;
  765. top: 5px;
  766. left: 5px;
  767. -webkit-transform:rotate(-45deg);
  768.    -moz-transform:rotate(-45deg);
  769.     -ms-transform:rotate(-45deg);
  770.      -o-transform:rotate(-45deg);
  771.         transform:rotate(-45deg);
  772. }
  773.  
  774. .logo:after {position: absolute;
  775. content: '';
  776. background-color: #231F20;
  777. width: 5px;
  778. height: 5px;
  779. border-radius: 50%;
  780. top: 7px;
  781. left: 7px;
  782. }
  783.  
  784. .lines {width: 5px;
  785. height: 1px;
  786. z-index: 9999;
  787. background-color: #231F20;
  788. top: 20px;
  789. right: 12px;}
  790.  
  791. .lines:after {position: absolute;
  792. content: '';
  793. width: 11px;
  794. height: 1px;
  795. z-index: 9999;
  796. background-color: #245580;
  797. top: 1px;
  798. right: -4px;}
  799.  
  800. .curve1 {width: 40px;
  801. height: 29px;
  802. background-color: rgba(0, 0, 0, 0);
  803. top: 249px;
  804. z-index: 99999;
  805. left: 110px;
  806. border-bottom-left-radius: 20px;
  807. border-left: dotted 1px #FFF;
  808. box-shadow: 1px 0px 0px 0px #133652 inset;}
  809.  
  810. .curve1:after {position: absolute;
  811. content: '';
  812. width: 32px;
  813. top: -44px;
  814. height: 50px;
  815. border-bottom-right-radius: 20px;
  816. border-bottom-left-radius: 5px;
  817. border-bottom: dotted 1px #FFF;
  818. background-color: rgba(0, 0, 0, 0); }
  819.  
  820. .make_it_left_curve {left: -11px;
  821. -webkit-transform:scaleX(-1);
  822.    -moz-transform:scaleX(-1);
  823.     -ms-transform:scaleX(-1);
  824.      -o-transform:scaleX(-1);
  825.         transform:scaleX(-1);}
  826.  
  827. .curve2 {width: 91px;
  828. height: 29px;
  829. background-color: rgba(0, 0, 0, 0);
  830. top: 175px;
  831. z-index: 100000;
  832. left: 25px;
  833. border-bottom-left-radius: 50%;
  834. border-bottom-right-radius: 50%;
  835. border-bottom: dotted 1px #FFF;}
  836.  
  837. .bill h2 {top: 364px;
  838. font-family: tahoma;
  839. font-size: 34px;
  840. font-weight: normal;
  841. left: 43px;
  842. color: #414141;}
  843.  
  844. /****************************************************/
  845.  
  846. .jerry {background: #f1cb48;
  847. background: -moz-linear-gradient(left,  #f1cb48 0%, #f9d65c 24%, #f9d65c 48%, #e6bc3b 99%);
  848. background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1cb48), color-stop(24%,#f9d65c), color-stop(48%,#f9d65c), color-stop(99%,#e6bc3b));
  849. background: -webkit-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
  850. background: -o-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
  851. background: -ms-linear-gradient(left,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
  852. background: linear-gradient(to right,  #f1cb48 0%,#f9d65c 24%,#f9d65c 48%,#e6bc3b 99%);
  853. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1cb48', endColorstr='#e6bc3b',GradientType=1 );
  854. width: 180px;
  855. height: 212px;
  856. border-top-left-radius: 75px;
  857. border-top-right-radius: 75px;
  858. border-bottom-left-radius: 65px;
  859. border-bottom-right-radius: 64px;
  860. position: relative;
  861. float: left;
  862. top: 105px;
  863. transition: ease 0.3s all;
  864. -webkit-transition: ease 0.3s all;
  865. left: 200px;}
  866.  
  867. .jerry .dark_light {left: 136px;}
  868.  
  869. .jerry .eyes1, .jerry .eyes2 {
  870. top: 4px;
  871. -webkit-transform:scale(0.9);
  872.    -moz-transform:scale(0.9);
  873.     -ms-transform:scale(0.9);
  874.      -o-transform:scale(0.9);
  875.         transform:scale(0.9);
  876. }
  877.  
  878. .jerry .eyes1 .brown_eye {left: 24px;}
  879.  
  880. .jerry .eyes2 {left: 44px;}
  881.  
  882. .jerry .eyes1 {left: -20px;}
  883.  
  884. .jerry .right_tie {right: 1px;}
  885.  
  886. .jerry .right_tie .top_tie, .jerry .right_tie .down_tie    {width: 38px;}
  887.  
  888. .jerry .right_tie .top_tie:after, .jerry .right_tie .down_tie:after {right: 35px;}
  889.  
  890. .jerry .left_tie {right: 174px;} 
  891.  
  892. .jerry .left_tie .top_tie, .jerry .left_tie .down_tie    {width: 7px;}
  893.  
  894. .jerry .left_tie .top_tie:after, .jerry .left_tie .down_tie:after {display: none;}
  895.  
  896. .clothes .main_jerry {background-color: #35668F;
  897. width: 100px;
  898. height: 43px;
  899. top: 143px;
  900. left: 29px;
  901. z-index: 99999;
  902. border-left: 1px dotted #FFF;
  903. border-right: 1px dotted #FFF;}
  904.  
  905. .jerry .jerry_right_shirt{
  906. width: 64px;
  907. left: 117px;
  908. top: 139px;}
  909.  
  910. .jerry_left_shirt {top: 139px;
  911. width: 46px;
  912. left: -5px;
  913. -webkit-transform:scaleX(-1) rotate(-23deg);
  914.    -moz-transform:scaleX(-1) rotate(-23deg);
  915.     -ms-transform:scaleX(-1) rotate(-23deg);
  916.      -o-transform:scaleX(-1) rotate(-23deg);
  917.         transform:scaleX(-1) rotate(-23deg);
  918.     }
  919.  
  920. .jerry .pocket {-webkit-transform:scale(0.9);
  921.    -moz-transform:scale(0.9);
  922.     -ms-transform:scale(0.9);
  923.      -o-transform:scale(0.9);
  924.         transform:scale(0.9);
  925. top: 152px;
  926. left: 57px;}
  927.  
  928. .jerry_bottom {
  929. background: #35668F;
  930. background: -moz-radial-gradient(top, ellipse cover, #35668f 61%, #003e82 100%);
  931. background: -webkit-gradient(radial, top center, 0px, top center, 100%, color-stop(61%,#35668f), color-stop(100%,#003e82));
  932. background: -webkit-radial-gradient(top, ellipse cover, #35668F 61%,#003E82 100%);
  933. background: -o-radial-gradient(top, ellipse cover, #35668f 61%,#003e82 100%);
  934. background: -ms-radial-gradient(top, ellipse cover, #35668f 61%,#003e82 100%);
  935. background: radial-gradient(ellipse at top, #35668F 61%,#003E82 100%);
  936. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35668f', endColorstr='#003e82',GradientType=1 );
  937. filter: inherit;
  938. height: 43px;
  939. width: 171px;
  940. top: 169px;
  941. left: 4px;
  942. border-bottom-right-radius: 70px;
  943. border-bottom-left-radius: 70px;}
  944.  
  945. .jerry_shoes {background-color: #231F20;
  946. width: 45px;
  947. height: 9px;
  948. top: -68px;
  949. left: 84px;
  950. border-top-right-radius: 14px;
  951. -webkit-transform:rotate(2deg);
  952.    -moz-transform:rotate(2deg);
  953.     -ms-transform:rotate(2deg);
  954.      -o-transform:rotate(2deg);
  955.         transform:rotate(2deg);
  956. }
  957.  
  958. .jerry_shoes:after {position: absolute;
  959. content: '';
  960. border-top-right-radius: 30%;
  961. width: 30px;
  962. height: 6px;
  963. background-color: #231F20;
  964. top: 8px;
  965. right: 0px;
  966. border-bottom-right-radius: 31%;
  967. border-bottom-left-radius: 50%;
  968. -webkit-transform:rotate(2deg);
  969.    -moz-transform:rotate(2deg);
  970.     -ms-transform:rotate(2deg);
  971.      -o-transform:rotate(2deg);
  972.         transform:rotate(2deg);
  973. }
  974.  
  975. .jerry_shoes:before {position: absolute;
  976. content: '';
  977. width: 9px;
  978. height: 6px;
  979. background-color: #231F20;
  980. top: 6px;
  981. left: 0px;
  982. border-bottom-right-radius: 40%;
  983. }
  984.  
  985. .jerry_small_shoes {
  986. border-radius: 40%;
  987. width: 30px;
  988. height: 10px;
  989. background-color: #231F20;
  990. top: -5px;
  991. right: 4px;
  992. -webkit-transform:rotate(9deg);
  993.    -moz-transform:rotate(9deg);
  994.     -ms-transform:rotate(9deg);
  995.      -o-transform:rotate(9deg);
  996.         transform:rotate(9deg);
  997. }
  998.  
  999. .jerry_small_shoes:before {position: absolute;
  1000. content: '';
  1001. width: 36px;
  1002. height: 8px;
  1003. background-color: #35668F;
  1004. top: -2px;
  1005. left: -11px;
  1006. -webkit-transform:rotate(-16deg) !important;
  1007.    -moz-transform:rotate(-16deg) !important;
  1008.     -ms-transform:rotate(-16deg) !important;
  1009.      -o-transform:rotate(-16deg) !important;
  1010.         transform:rotate(-16deg) !important;
  1011. border-bottom-right-radius: 4px;
  1012. }
  1013.  
  1014. .jerry_left_shoes {left: 30px;
  1015. -webkit-transform:scaleX(-1);
  1016.    -moz-transform:scaleX(-1);
  1017.     -ms-transform:scaleX(-1);
  1018.      -o-transform:scaleX(-1);
  1019.         transform:scaleX(-1);
  1020. }
  1021.  
  1022. .jerry_smile {width: 64px;
  1023. height: 17px;
  1024. background-color: #2B2B2B;
  1025. top: 112px;
  1026. left: 45px;
  1027. border-bottom-left-radius: 130px;
  1028. border-bottom-right-radius: 96px;
  1029. -webkit-transform:rotate(-5deg);
  1030.    -moz-transform:rotate(-5deg);
  1031.     -ms-transform:rotate(-5deg);
  1032.      -o-transform:rotate(-5deg);
  1033.         transform:rotate(-5deg);}
  1034.  
  1035. .jerry_smile:before {position: absolute;
  1036. content: '';
  1037. width: 54px;
  1038. height: 12px;
  1039. top: 7px;
  1040. left: 6px;
  1041. border-radius: 50%;
  1042. background-color: #2B2B2B;}
  1043.  
  1044. .jerry_smile:after {position: absolute;
  1045. content: '';
  1046. width: 62px;
  1047. height: 9px;
  1048. top: -5px;
  1049. left: 0px;
  1050. -webkit-transform:rotate(-1deg);
  1051.    -moz-transform:rotate(-1deg);
  1052.     -ms-transform:rotate(-1deg);
  1053.      -o-transform:rotate(-1deg);
  1054.         transform:rotate(-1deg);
  1055. border-radius: 50%;
  1056. background-color: #F9D65C;}
  1057.  
  1058. .teeth1 {width: 16px;
  1059. height: 11px;
  1060. border-bottom-right-radius: 8px;
  1061. border-bottom-left-radius: 3px;
  1062. right: -1px;
  1063. background-color: #F3F3F3;
  1064. box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2) inset}
  1065.  
  1066. .teeth1:after {width: 16px;
  1067. height: 11px;
  1068. position: absolute;
  1069. content: '';
  1070. border-bottom-right-radius: 5px;
  1071. border-bottom-left-radius: 3px;
  1072. right: 15px;
  1073. top: 1px;
  1074. background-color: #F3F3F3;
  1075. box-shadow: 1px 4px 7px rgba(0, 0, 0, 0.2) inset;}
  1076.  
  1077. .teeth2 {width: 18px;
  1078. height: 11px;
  1079. border-bottom-right-radius: 4px;
  1080. border-bottom-left-radius: 6px;
  1081. top: 1px;
  1082. right: 28px;
  1083. background-color: #F3F3F3;
  1084. box-shadow: 1px 4px 10px rgba(0, 0, 0, 0.2) inset;}
  1085.  
  1086. .teeth2:after {width: 16px;
  1087. height: 11px;
  1088. position: absolute;
  1089. content: '';
  1090. border-bottom-right-radius: 5px;
  1091. border-bottom-left-radius: 9px;
  1092. right: 17px;
  1093. top: -1px;
  1094. background-color: #F3F3F3;
  1095. box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.2) inset;}
  1096.  
  1097. .jerry_hair ul {list-style: none}
  1098.  
  1099. .jerry_hair ul li {width: 1px;
  1100. background-color: #222;}
  1101.  
  1102. li.h1 {height: 27px;
  1103. left: 92px;
  1104. top: -18px;
  1105. -webkit-transform:rotate(5deg);
  1106.    -moz-transform:rotate(5deg);
  1107.     -ms-transform:rotate(5deg);
  1108.      -o-transform:rotate(5deg);
  1109.         transform:rotate(5deg);}
  1110.  
  1111. li.h2 {height: 25px;
  1112. left: 102px;
  1113. top: -18px;
  1114. -webkit-transform:rotate(8deg);
  1115.    -moz-transform:rotate(8deg);
  1116.     -ms-transform:rotate(8deg);
  1117.      -o-transform:rotate(8deg);
  1118.         transform:rotate(8deg);}
  1119.  
  1120. li.h3 {height: 23px;
  1121. left: 111px;
  1122. top: -17px;
  1123. -webkit-transform:rotate(10deg);
  1124.    -moz-transform:rotate(10deg);
  1125.     -ms-transform:rotate(10deg);
  1126.      -o-transform:rotate(10deg);
  1127.         transform:rotate(10deg);}
  1128.  
  1129. li.h4 {height: 18px;
  1130. left: 121px;
  1131. top: -13px;
  1132. -webkit-transform:rotate(11deg);
  1133.    -moz-transform:rotate(11deg);
  1134.     -ms-transform:rotate(11deg);
  1135.      -o-transform:rotate(11deg);
  1136.         transform:rotate(11deg);}
  1137.  
  1138. li.h5 {height: 23px;
  1139. left: 82px;
  1140. top: -17px;
  1141. -webkit-transform:rotate(-1deg);
  1142.    -moz-transform:rotate(-1deg);
  1143.     -ms-transform:rotate(-1deg);
  1144.      -o-transform:rotate(-1deg);
  1145.         transform:rotate(-1deg);}
  1146.  
  1147. li.h6 {height: 27px;
  1148. left: 72px;
  1149. top: -18px;
  1150. -webkit-transform:rotate(-6deg);
  1151.    -moz-transform:rotate(-6deg);
  1152.     -ms-transform:rotate(-6deg);
  1153.      -o-transform:rotate(-6deg);
  1154.         transform:rotate(-6deg);}
  1155.  
  1156. li.h7 {height: 24px;
  1157. left: 62px;
  1158. top: -16px;
  1159. -webkit-transform:rotate(-9deg);
  1160.    -moz-transform:rotate(-9deg);
  1161.     -ms-transform:rotate(-9deg);
  1162.      -o-transform:rotate(-9deg);
  1163.         transform:rotate(-9deg);}
  1164.  
  1165. li.h8 {height: 17px;
  1166. left: 53px;
  1167. top: -9px;
  1168. -webkit-transform:rotate(-10deg);
  1169.    -moz-transform:rotate(-10deg);
  1170.     -ms-transform:rotate(-10deg);
  1171.      -o-transform:rotate(-10deg);
  1172.         transform:rotate(-10deg);}
  1173.  
  1174. li.h9 {height: 12px;
  1175. left: 44px;
  1176. top: -3px;
  1177. -webkit-transform:rotate(-11deg);
  1178.    -moz-transform:rotate(-11deg);
  1179.     -ms-transform:rotate(-11deg);
  1180.      -o-transform:rotate(-11deg);
  1181.         transform:rotate(-11deg);}
  1182.  
  1183. li.h10 {height: 20px;
  1184. left: 130px;
  1185. top: -14px;
  1186. -webkit-transform:rotate(13deg);
  1187.    -moz-transform:rotate(13deg);
  1188.     -ms-transform:rotate(13deg);
  1189.      -o-transform:rotate(13deg);
  1190.         transform:rotate(13deg);}
  1191.  
  1192. li.h11 {height: 17px;
  1193. left: 138px;
  1194. top: -6px;
  1195. -webkit-transform:rotate(16deg);
  1196.    -moz-transform:rotate(16deg);
  1197.     -ms-transform:rotate(16deg);
  1198.      -o-transform:rotate(16deg);
  1199.         transform:rotate(16deg);}
  1200.  
  1201. li.h12 {height: 15px;
  1202. left: 35px;
  1203. top: -3px;
  1204. -webkit-transform:rotate(-13deg);
  1205.    -moz-transform:rotate(-13deg);
  1206.     -ms-transform:rotate(-13deg);
  1207.      -o-transform:rotate(-13deg);
  1208.         transform:rotate(-13deg);}
  1209.  
  1210. .jerry h2 {
  1211. top: 258px;
  1212. font-family: tahoma;
  1213. font-size: 34px;
  1214. font-weight: normal;
  1215. left: 43px;
  1216. color: #414141;}
  1217.  
  1218. .jerry_lh {width: 39px;
  1219. height: 15px;
  1220. background-color: #F1CC49;
  1221. top: 151px;
  1222. border-bottom-left-radius: 11px;
  1223. left: -25px;
  1224. -webkit-transform:rotate(-39deg);
  1225.    -moz-transform:rotate(-39deg);
  1226.     -ms-transform:rotate(-39deg);
  1227.      -o-transform:rotate(-39deg);
  1228.         transform:rotate(-39deg);}
  1229.  
  1230. .animated_lh {width: 27px;
  1231. height: 15px;
  1232. background-color: #F1CC49;
  1233. top: 150px;
  1234. border-bottom-right-radius: 11px;
  1235. left: -37px;
  1236. -webkit-transform:rotate(40deg);
  1237.    -moz-transform:rotate(40deg);
  1238.     -ms-transform:rotate(40deg);
  1239.      -o-transform:rotate(40deg);
  1240.         transform:rotate(40deg);
  1241.  
  1242.     -moz-animation: hand_animate 2s ease 1s infinite;
  1243.     -webkit-animation: hand_animate 2s ease 1s infinite;
  1244.         -o-animation: hand_animate 2s ease 1s infinite;
  1245.         animation: hand_animate 2s ease 1s infinite;
  1246.  
  1247. }
  1248.  
  1249. @-moz-keyframes hand_animate
  1250. {
  1251. 0%   {-moz-transform: rotate(40deg);}
  1252. 50% {-moz-transform: rotate(70deg);}
  1253. 100% {-moz-transform: rotate(40deg);}
  1254. }
  1255.  
  1256. @-webkit-keyframes hand_animate
  1257. {
  1258. 0%   {-webkit-transform: rotate(40deg);}
  1259. 50% {-webkit-transform: rotate(70deg);}
  1260. 100% {-webkit-transform: rotate(40deg);}
  1261. }
  1262.  
  1263. @-ms-keyframes hand_animate
  1264. {
  1265. 0%   {-ms-transform: rotate(40deg);}
  1266. 50% {-ms-transform: rotate(70deg);}
  1267. 100% {-ms-transform: rotate(40deg);}
  1268. }
  1269.  
  1270. @-o-keyframes hand_animate
  1271. {
  1272. 0%   {-o-transform: rotate(40deg);}
  1273. 50% {-o-transform: rotate(70deg);}
  1274. 100% {-o-transform: rotate(40deg);}
  1275. }
  1276.  
  1277. @keyframes hand_animate
  1278. {
  1279. 0%   {transform: rotate(40deg);}
  1280. 50% {transform: rotate(70deg);}
  1281. 100% {transform: rotate(40deg);}
  1282. }
  1283.  
  1284. .gloves_lh {width: 35px;
  1285. height: 30px;
  1286. top: -9px;
  1287. left: -32px;
  1288. background-color: #231F20;
  1289. border-radius: 50%;}
  1290.  
  1291. .gloves_lh:after {position: absolute;
  1292. content: '';
  1293. width: 23px;
  1294. left: -12px;
  1295. top: 1px;
  1296. background-color: #231F20;
  1297. border-radius: 50%;
  1298. height: 17px;
  1299. -webkit-transform:rotate(21deg);
  1300.    -moz-transform:rotate(21deg);
  1301.     -ms-transform:rotate(21deg);
  1302.      -o-transform:rotate(21deg);
  1303.         transform:rotate(21deg);}
  1304.  
  1305. .gloves_lh:before {position: absolute;
  1306. content: '';
  1307. width: 31px;
  1308. left: -11px;
  1309. background-color: #231F20;
  1310. border-radius: 50%;
  1311. top: 14px;
  1312. height: 18px;
  1313. -webkit-transform:rotate(-1deg);
  1314.    -moz-transform:rotate(-1deg);
  1315.     -ms-transform:rotate(-1deg);
  1316.      -o-transform:rotate(-1deg);
  1317.         transform:rotate(-1deg);}
  1318.  
  1319. .gloves_lh2 {width: 19px;
  1320. height: 37px;
  1321. -webkit-transform:rotate(-22deg);
  1322.    -moz-transform:rotate(-22deg);
  1323.     -ms-transform:rotate(-22deg);
  1324.      -o-transform:rotate(-22deg);
  1325.         transform:rotate(-22deg);
  1326. top: -19px;
  1327. left: -29px;
  1328. background-color: #231F20;
  1329. border-radius: 50%;}
  1330.  
  1331. .gloves_lh2:before {position: absolute;
  1332. content: '';
  1333. width: 14px;
  1334. left: 22px;
  1335. background-color: #231F20;
  1336. top: 25px;
  1337. height: 19px;
  1338. border-top-left-radius: 6px;
  1339. border-bottom-left-radius: 6px;
  1340. -webkit-transform:rotate(20deg) !important;
  1341.    -moz-transform:rotate(20deg) !important;
  1342.     -ms-transform:rotate(20deg) !important;
  1343.      -o-transform:rotate(20deg) !important;
  1344.         transform:rotate(20deg) !important;}
  1345.  
  1346. .jerry_curve1 {width: 40px;
  1347. height: 29px;
  1348. background-color: rgba(0, 0, 0, 0);
  1349. top: 173px;
  1350. z-index: 99999;
  1351. left: 129px;
  1352. border-bottom-left-radius: 20px;
  1353. border-left: dotted 1px #FFF;
  1354. box-shadow: 1px 0px 0px 0px #133652 inset;}
  1355.  
  1356. .jerry_curve1:after {position: absolute;
  1357. content: '';
  1358. width: 43px;
  1359. top: -50px;
  1360. height: 50px;
  1361. left: 2px;
  1362. border-bottom: dotted 1px #FFF;
  1363. background-color: rgba(0, 0, 0, 0); }
  1364.  
  1365. .jerry_left_curve {width: 12px;left: 17px;
  1366. -webkit-transform:scaleX(-1);
  1367.    -moz-transform:scaleX(-1);
  1368.     -ms-transform:scaleX(-1);
  1369.      -o-transform:scaleX(-1);
  1370.         transform:scaleX(-1);}
  1371.  
  1372. .jerry_left_curve .jerry_curve1:after {width: 21px;}
  1373.  
  1374. .jerry_curve2 {width: 71px;
  1375. height: 29px;
  1376. background-color: rgba(0, 0, 0, 0);
  1377. top: 118px;
  1378. z-index: 100000;
  1379. left: 43px;
  1380. border-bottom: dotted 1px #CACACA;}
  1381.  
  1382. .jerry .eye_animate {  animation: eyes_animation 2s ease 3s infinite;
  1383.     -moz-animation: eyes_animation 2s ease 3s infinite;
  1384.     -o-animation: eyes_animation 2s ease 3s infinite;
  1385.     -webkit-animation: eyes_animation 2s ease 3s infinite;}
  1386.  
  1387. .jerry_rh {width: 34px;
  1388. height: 15px;
  1389. background-color: #EBC03D;
  1390. top: 161px;
  1391. border-bottom-left-radius: 11px;
  1392. left: 156px;
  1393. z-index: 999999;
  1394. -webkit-transform:rotate(-109deg);
  1395.    -moz-transform:rotate(-109deg);
  1396.     -ms-transform:rotate(-109deg);
  1397.      -o-transform:rotate(-109deg);
  1398.         transform:rotate(-109deg);
  1399. box-shadow: 3px 1px 0px 2px #E2B836 inset;}
  1400.  
  1401. .gloves_rh {
  1402. width: 20px;
  1403. height: 15px;
  1404. background-color: #EBC03D;
  1405. top: 175px;
  1406. border-bottom-left-radius: 11px;
  1407. left: 152px;
  1408. z-index: 999999;
  1409. -webkit-transform:rotate(-19deg);
  1410.    -moz-transform:rotate(-19deg);
  1411.     -ms-transform:rotate(-19deg);
  1412.      -o-transform:rotate(-19deg);
  1413.         transform:rotate(-19deg);;
  1414. box-shadow: 3px 1px 0px 2px #E2B836 inset;}
  1415.  
  1416. .gloves_rh:before {position: absolute;
  1417. content: '';
  1418. width: 17px;
  1419. left: -19px;
  1420. background-color: #231F20;
  1421. top: -3px;
  1422. height: 22px;
  1423. border-top-left-radius: 5px;
  1424. border-bottom-left-radius: 16px;
  1425. border-top-right-radius: 5px;
  1426. border-bottom-right-radius: 5px;
  1427. -webkit-transform:rotate(-4deg) !important;
  1428.    -moz-transform:rotate(-4deg) !important;
  1429.     -ms-transform:rotate(-4deg) !important;
  1430.      -o-transform:rotate(-4deg) !important;
  1431.         transform:rotate(-4deg) !important;}
  1432.  
  1433. .gloves_rh:after {position: absolute;
  1434. content: '';
  1435. width: 13px;
  1436. left: -6px;
  1437. background-color: #231F20;
  1438. top: -2px;
  1439. height: 19px;
  1440. border-top-left-radius: 4px;
  1441. border-bottom-left-radius: 4px;
  1442. -webkit-transform:rotate(3deg) !important;
  1443.    -moz-transform:rotate(3deg) !important;
  1444.     -ms-transform:rotate(3deg) !important;
  1445.      -o-transform:rotate(3deg) !important;
  1446.         transform:rotate(3deg) !important;}
  1447.  
  1448. /********************************************************/
  1449.  
  1450. .evil {background: #8266bd;
  1451. background: -moz-linear-gradient(left,  #8266bd 18%, #685a93 100%);
  1452. background: -webkit-gradient(linear, left top, right top, color-stop(18%,#8266bd), color-stop(100%,#685a93));
  1453. background: -webkit-linear-gradient(left,  #8266bd 18%,#685a93 100%);
  1454. background: -o-linear-gradient(left,  #8266bd 18%,#685a93 100%);
  1455. background: -ms-linear-gradient(left,  #8266bd 18%,#685a93 100%);
  1456. background: linear-gradient(to right,  #8266bd 18%,#685a93 100%);
  1457. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8266bd', endColorstr='#685a93',GradientType=1 );
  1458. width: 140px;
  1459. height: 270px;
  1460. border-radius: 54px;
  1461. border-top-left-radius: 70px;
  1462. border-top-right-radius: 70px;
  1463. float: left;
  1464. left: 412px;
  1465. top: 47px;
  1466. position: relative;
  1467. transition: ease 0.3s all;
  1468. -webkit-transition: ease 0.3s all;
  1469. }
  1470.  
  1471. .evil .eyes {left: -8px;
  1472. top: 2px;}
  1473.  
  1474. .evil .eyes .brown_eye {background-color: #9860bb;
  1475. left: 7px;
  1476. transition: all 0.5s ease;
  1477.     animation: purble_eye 3s ease 3s infinite;
  1478.     -o-animation: purble_eye 3s ease 3s infinite;
  1479.     -moz-animation: purble_eye 3s ease 3s infinite;
  1480.     -webkit-animation: purble_eye 3s ease 3s infinite;
  1481. }
  1482.  
  1483. @-webkit-keyframes purble_eye
  1484. {
  1485. 0%   {left:7px;}
  1486. 20% {left:17px;}
  1487. 55% {left:17px;}
  1488. 100% {left:7px;}
  1489. }
  1490.  
  1491. @-moz-keyframes purble_eye
  1492. {
  1493. 0%   {left:7px;}
  1494. 20% {left:17px;}
  1495. 55% {left:17px;}
  1496. 100% {left:7px;}
  1497. }
  1498.  
  1499. @-o-keyframes purble_eye
  1500. {
  1501. 0%   {left:7px;}
  1502. 20% {left:17px;}
  1503. 55% {left:17px;}
  1504. 100% {left:7px;}
  1505. }
  1506.  
  1507. @keyframes purble_eye
  1508. {
  1509. 0%   {left:7px;}
  1510. 20% {left:17px;}
  1511. 55% {left:17px;}
  1512. 100% {left:7px;}
  1513. }
  1514.  
  1515. .evil .eye_animate {background-color: #8266bd;
  1516.     animation: evil_eye 3s ease 2s infinite;
  1517.     -o-animation: evil_eye 3s ease 2s infinite;
  1518.     -moz-animation: evil_eye 3s ease 2s infinite;
  1519.     -webkit-animation: evil_eye 3s ease 2s infinite;
  1520.     height: 25px;
  1521.     border-radius: 0px
  1522.  
  1523. }
  1524.  
  1525. @-moz-keyframes evil_eye
  1526. {
  1527. 0%   {height:25px;}
  1528. 20% {height:57px;}
  1529. 45% {height:25px;}
  1530. 100% {height:25px;}
  1531. }
  1532.  
  1533. @-o-keyframes evil_eye
  1534. {
  1535. 0%   {height:25px;}
  1536. 20% {height:57px;}
  1537. 45% {height:25px;}
  1538. 100% {height:25px;}
  1539. }
  1540.  
  1541. @-webkit-keyframes evil_eye
  1542. {
  1543. 0%   {height:25px;}
  1544. 20% {height:57px;}
  1545. 45% {height:25px;}
  1546. 100% {height:25px;}
  1547. }
  1548.  
  1549. @keyframes evil_eye
  1550. {
  1551. 0%   {height:25px;}
  1552. 20% {height:57px;}
  1553. 45% {height:25px;}
  1554. 100% {height:25px;}
  1555. }
  1556.  
  1557. .evil .right_tie .top_tie, .evil .right_tie .down_tie {width: 40px;}
  1558.  
  1559. .evil .right_tie .top_tie:after, .evil .right_tie .down_tie:after {right: 34px;}
  1560.  
  1561. .evil .left_tie .top_tie:after, .evil .left_tie .down_tie:before {content:none;}
  1562.  
  1563. .clothes .main_evil {background-color: #303124;
  1564. width: 100px;
  1565. height: 43px;
  1566. top: 143px;
  1567. left: 29px;
  1568. z-index: 99999;
  1569. border-left: 1px dotted #FFF;
  1570. border-right: 1px dotted #FFF;}
  1571.  
  1572. .evil_right_shirt{
  1573. background-color: #151612;
  1574. width: 67px;
  1575. left: 82px;
  1576. top: 205px;
  1577. border: none;
  1578. -webkit-transform:rotate(-43deg);
  1579.    -moz-transform:rotate(-43deg);
  1580.     -ms-transform:rotate(-43deg);
  1581.      -o-transform:rotate(-43deg);
  1582.         transform:rotate(-43deg);
  1583. }
  1584.  
  1585. .evil_left_shirt {top: 219px;
  1586. background-color: #151612;
  1587. width: 23px;
  1588. height: 8px;
  1589. border: none;
  1590. left: -7px;
  1591. -webkit-transform:scaleX(-1) rotate(-55deg);
  1592.    -moz-transform:scaleX(-1) rotate(-55deg);
  1593.     -ms-transform:scaleX(-1) rotate(-55deg);
  1594.      -o-transform:scaleX(-1) rotate(-55deg);
  1595.         transform:scaleX(-1) rotate(-55deg);}
  1596.  
  1597. .evil_bottom {background: #303124;
  1598. background: -moz-radial-gradient(center, ellipse cover,  #303124 0%, #090a07 99%);
  1599. background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#303124), color-stop(99%,#090a07));
  1600. background: -webkit-radial-gradient(center, ellipse cover,  #303124 0%,#090a07 99%);
  1601. background: -o-radial-gradient(center, ellipse cover,  #303124 0%,#090a07 99%);
  1602. background: -ms-radial-gradient(center, ellipse cover,  #303124 0%,#090a07 99%);
  1603. background: radial-gradient(ellipse at center,  #303124 0%,#090a07 99%);
  1604. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303124', endColorstr='#090a07',GradientType=1 );
  1605. height: 43px;
  1606. width: 138px;
  1607. top: 229px;
  1608. left: 1px;
  1609. border-bottom-right-radius: 50px;
  1610. border-bottom-left-radius: 40px;
  1611. }
  1612.  
  1613. .evil_bottom:after {position: absolute;
  1614. content: '';
  1615. background-color: #685A93;
  1616. height: 33px;
  1617. width: 41px;
  1618. left: 97px;
  1619. border-radius: 50%;
  1620. top: -16px;
  1621. }
  1622.  
  1623. .evil_bottom:before {position: absolute;
  1624. content: '';
  1625. background: #8266bd;
  1626. background: -moz-linear-gradient(left,  #8266bd 28%, #685a93 130%);
  1627. background: -webkit-gradient(linear, left top, right top, color-stop(28%,#8266bd), color-stop(130%,#685a93));
  1628. background: -webkit-linear-gradient(left,  #8266bd 28%,#685a93 130%);
  1629. background: -o-linear-gradient(left,  #8266bd 28%,#685a93 130%);
  1630. background: -ms-linear-gradient(left,  #8266bd 28%,#685a93 130%);
  1631. background: linear-gradient(to right,  #8266bd 28%,#685a93 130%);
  1632. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8266bd', endColorstr='#685a93',GradientType=1 );
  1633. height: 33px;
  1634. width: 96px;
  1635. left: 4px;
  1636. border-radius: 50%;
  1637. top: -27px;
  1638.  
  1639. }
  1640.  
  1641. .evil_right_leg {background: #090a07;
  1642. background: -moz-linear-gradient(top,  #090a07 0%, #303124 100%);
  1643. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#090a07), color-stop(100%,#303124));
  1644. background: -webkit-linear-gradient(top,  #090a07 0%,#303124 100%);
  1645. background: -o-linear-gradient(top,  #090a07 0%,#303124 100%);
  1646. background: -ms-linear-gradient(top,  #090a07 0%,#303124 100%);
  1647. background: linear-gradient(to bottom,  #090a07 0%,#303124 100%);
  1648. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#090a07', endColorstr='#303124',GradientType=0 );
  1649. width: 43px;
  1650. height: 16px;
  1651. left: 60px;
  1652. border-bottom-left-radius: 4px;
  1653. top: -20px;}
  1654.  
  1655. .evil_right_leg:before {position: absolute;
  1656. content: '';
  1657. border-radius: 50%;
  1658. width: 40px;
  1659. height: 73px;
  1660. left: 29px;
  1661. background-color: #FFF;
  1662. top: 5px;}
  1663.  
  1664. .evil_left_leg {left: 18px;
  1665. width: 40px;
  1666. height: 22px;
  1667. top: -27px;
  1668. -webkit-transform:scaleX(-1);
  1669.    -moz-transform:scaleX(-1);
  1670.     -ms-transform:scaleX(-1);
  1671.      -o-transform:scaleX(-1);
  1672.         transform:scaleX(-1);}
  1673.  
  1674. .evil_right_shoes {top: -5px;
  1675. left: 61px;
  1676. border-top-right-radius: 14px;
  1677. -webkit-transform:rotate(-2deg);
  1678.    -moz-transform:rotate(-2deg);
  1679.     -ms-transform:rotate(-2deg);
  1680.      -o-transform:rotate(-2deg);
  1681.         transform:rotate(-2deg);}
  1682.  
  1683. .evil_left_shoes {left: 7px;
  1684. top: -6px;
  1685. -webkit-transform:scaleX(-1);
  1686.    -moz-transform:scaleX(-1);
  1687.     -ms-transform:scaleX(-1);
  1688.      -o-transform:scaleX(-1);
  1689.         transform:scaleX(-1);}
  1690.  
  1691. .evil .small_shoes:before {background-color:#272722}
  1692.  
  1693. .evil_mouth {width: 90px;
  1694. height: 20px;
  1695. top: 161px;
  1696. -webkit-transform:rotate(0deg);
  1697.    -moz-transform:rotate(0deg);
  1698.     -ms-transform:rotate(0deg);
  1699.      -o-transform:rotate(0deg);
  1700.         transform:rotate(0deg);
  1701. left: -12px;
  1702. border-top-left-radius: 9px;
  1703. border-top-right-radius: 60px;
  1704. border-bottom-left-radius: 55px;
  1705. background: #8266BD;
  1706. background: -moz-linear-gradient(left, #8266bd 18%, #685a93 220%);
  1707. background: -webkit-gradient(linear, left top, right top, color-stop(18%,#8266BD), color-stop(220%,#685A93));
  1708. background: -webkit-linear-gradient(left, #8266BD 18%,#685A93 220%);
  1709. background: -o-linear-gradient(left, #8266bd 18%,#685a93 220%);
  1710. background: -ms-linear-gradient(left, #8266bd 18%,#685a93 220%);
  1711. background: linear-gradient(to right, #8266BD 18%,#685A93 220%);
  1712. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8266bd', endColorstr='#685a93',GradientType=1 );
  1713.  
  1714.     animation: evilmouth 3s ease 2s infinite;
  1715.      -o-animation: evilmouth 3s ease 2s infinite;
  1716.     -moz-animation: evilmouth 3s ease 2s infinite;
  1717.     -webkit-animation: evilmouth 3s ease 2s infinite;
  1718.  
  1719. }
  1720.  
  1721. @-moz-keyframes evilmouth
  1722. {
  1723. 0%   {-moz-transform: rotate(0deg);}
  1724. 20% {-moz-transform: rotate(12deg);}
  1725. 45% {-moz-transform: rotate(0deg);}
  1726. 100% {-moz-transform: rotate(0deg);}
  1727. }
  1728.  
  1729. @-webkit-keyframes evilmouth
  1730. {
  1731. 0%   {-webkit-transform: rotate(0deg);}
  1732. 20% {-webkit-transform: rotate(12deg);}
  1733. 45% {-webkit-transform: rotate(0deg);}
  1734. 100% {-webkit-transform: rotate(0deg);}
  1735. }
  1736.  
  1737. @-o-keyframes evilmouth
  1738. {
  1739. 0%   {-o-transform: rotate(0deg);}
  1740. 20% {-o-transform: rotate(12deg);}
  1741. 45% {-o-transform: rotate(0deg);}
  1742. 100% {-o-transform: rotate(0deg);}
  1743. }
  1744.  
  1745. @keyframes evilmouth
  1746. {
  1747. 0%   {transform: rotate(0deg);}
  1748. 20% {transform: rotate(12deg);}
  1749. 45% {transform: rotate(0deg);}
  1750. 100% {transform: rotate(0deg);}
  1751. }
  1752.  
  1753. .evil_mouth:after  {position: absolute;
  1754. content: '';
  1755. height: 45px;
  1756. left: 5px;
  1757. top: -2px;
  1758. border-bottom-left-radius: 20px;
  1759. border-top-right-radius: 19px;
  1760. width: 23px;
  1761. -webkit-transform:rotate(-16deg);
  1762.    -moz-transform:rotate(-16deg);
  1763.     -ms-transform:rotate(-16deg);
  1764.      -o-transform:rotate(-16deg);
  1765.         transform:rotate(-16deg);
  1766. background-color: #8266BD;}
  1767.  
  1768. .evil_teeth {width: 20px;
  1769. height: 15px;
  1770. top: -16px;
  1771. border-top-left-radius: 8px;
  1772. left: 20px;
  1773. background-color: #F3F3F3;
  1774. box-shadow: 6px 0px 5px rgba(0, 0, 0, 0.2);
  1775. border-top-right-radius: 6px}
  1776.  
  1777. .evil_teeth:before {position: absolute;
  1778. content: '';
  1779. width: 11px;
  1780. height: 9px;
  1781. border-top-left-radius: 8px;
  1782. left: -11px;
  1783. top: 6px;
  1784. background-color: #F3F3F3;
  1785. box-shadow: 4px -3px 5px rgba(0, 0, 0, 0.1);
  1786. border-top-right-radius: 6px;}
  1787.  
  1788. .evil_teeth1 {width: 15px;
  1789. height: 11px;
  1790. top: -12px;
  1791. border-top-left-radius: 9px;
  1792. left: 47px;
  1793. background-color: #F3F3F3;
  1794. box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.1);
  1795. border-top-right-radius: 4px;}
  1796.  
  1797. .evil_teeth1:before {position: absolute;
  1798. content: '';
  1799. width: 8px;
  1800. height: 6px;
  1801. border-top-left-radius: 8px;
  1802. left: 17px;
  1803. top: 6px;
  1804. background-color: #F3F3F3;
  1805. box-shadow: 4px -3px 5px rgba(0, 0, 0, 0.1);
  1806. border-top-right-radius: 6px;}
  1807.  
  1808. .evil_rh {width: 14px;
  1809. height: 66px;
  1810. top: 217px;
  1811. background-color: #685a93;
  1812. left: 132px;
  1813. border-bottom-left-radius: 20px;
  1814. z-index: 99999;
  1815. -webkit-transform:rotate(-16deg);
  1816.    -moz-transform:rotate(-16deg);
  1817.     -ms-transform:rotate(-16deg);
  1818.      -o-transform:rotate(-16deg);
  1819.         transform:rotate(-16deg);
  1820. }
  1821.  
  1822. .evil_rh:after {
  1823. position: absolute;
  1824. content: '';
  1825. width: 14px;
  1826. height: 44px;
  1827. background-color: #685A93;
  1828. left: 15px;
  1829. top: 40px;
  1830. border-top-left-radius: 20px;
  1831. -webkit-transform:rotate(-78deg);
  1832.    -moz-transform:rotate(-78deg);
  1833.     -ms-transform:rotate(-78deg);
  1834.      -o-transform:rotate(-78deg);
  1835.         transform:rotate(-78deg);
  1836. }
  1837.  
  1838. .evil_gloves_rh {width: 27px;
  1839. height: 27px;
  1840. top: 51px;
  1841. border-radius: 60%;
  1842. background-color: #1a1b14;
  1843. left: 39px;
  1844. z-index: 99999;}
  1845.  
  1846. .evil_gloves_rh:after {position: absolute;
  1847. content: '';
  1848. width: 13px;
  1849. height: 17px;
  1850. left: -5px;
  1851. top: 5px;
  1852. background-color: #1A1B14;
  1853. border-radius: 40%;}
  1854.  
  1855. .evil_gloves_rh:before {position: absolute;
  1856. content: '';
  1857. width: 13px;
  1858. height: 17px;
  1859. left: 2px;
  1860. top: -5px;
  1861. -webkit-transform:rotate(30deg);
  1862.    -moz-transform:rotate(30deg);
  1863.     -ms-transform:rotate(30deg);
  1864.      -o-transform:rotate(30deg);
  1865.         transform:rotate(30deg);
  1866. background-color: #1A1B14;
  1867. border-radius: 50%;}
  1868.  
  1869. .evil_lh {width: 14px;
  1870. height: 66px;
  1871. top: 217px;
  1872. background-color: #685A93;
  1873. left: -5px;
  1874. border-bottom-right-radius: 20px;
  1875. -webkit-transform:rotate(8deg);
  1876.    -moz-transform:rotate(8deg);
  1877.     -ms-transform:rotate(8deg);
  1878.      -o-transform:rotate(8deg);
  1879.         transform:rotate(8deg);
  1880. }
  1881.  
  1882. .evil_lh:after {
  1883. position: absolute;
  1884. content: '';
  1885. width: 14px;
  1886. height: 19px;
  1887. background-color: #685A93;
  1888. left: -12px;
  1889. top: 47px;
  1890. border-top-left-radius: 20px;
  1891. -webkit-transform:rotate(-68deg);
  1892.    -moz-transform:rotate(-68deg);
  1893.     -ms-transform:rotate(-68deg);
  1894.      -o-transform:rotate(-68deg);
  1895.         transform:rotate(-68deg);
  1896. }
  1897.  
  1898. .evil_gloves_lh
  1899.  {width: 27px;
  1900. height: 27px;
  1901. top: 34px;
  1902. border-radius: 61%;
  1903. background-color: #1A1B14;
  1904. left: -32px;
  1905. z-index: 99999;}
  1906.  
  1907. .evil_gloves_lh:after {position: absolute;
  1908. content: '';
  1909. width: 13px;
  1910. height: 17px;
  1911. left: -5px;
  1912. top: 5px;
  1913. background-color: #1A1B14;
  1914. border-radius: 40%;}
  1915.  
  1916. .evil_gloves_lh:before {position: absolute;
  1917. content: '';
  1918. width: 13px;
  1919. height: 17px;
  1920. left: -1px;
  1921. top: 0px;
  1922. background-color: #1A1B14;
  1923. border-radius: 50%;}
  1924.  
  1925. ul.evil_hair {list-style: none;}
  1926.  
  1927. .eh1 {width: 50px;
  1928. height: 110px;
  1929. background-color: #685A93;
  1930. left: 97px;
  1931. top: -42px;
  1932. border-top-left-radius: 50px;
  1933. -webkit-transform:rotate(7deg);
  1934.    -moz-transform:rotate(7deg);
  1935.     -ms-transform:rotate(7deg);
  1936.      -o-transform:rotate(7deg);
  1937.         transform:rotate(7deg);}
  1938.  
  1939. .eh2 {width: 50px;
  1940. height: 164px;
  1941. background-color: #685A93;
  1942. left: 55px;
  1943. top: -78px;
  1944. border-top-left-radius: 50px;
  1945. -webkit-transform:rotate(7deg);
  1946.    -moz-transform:rotate(7deg);
  1947.     -ms-transform:rotate(7deg);
  1948.      -o-transform:rotate(7deg);
  1949.         transform:rotate(7deg);}
  1950.  
  1951. .eh3 {width: 50px;
  1952. height: 144px;
  1953. background-color: #685A93;
  1954. left: 6px;
  1955. top: -72px;
  1956. border-top-left-radius: 50px;
  1957. -webkit-transform:rotate(7deg);
  1958.    -moz-transform:rotate(7deg);
  1959.     -ms-transform:rotate(7deg);
  1960.      -o-transform:rotate(7deg);
  1961.         transform:rotate(7deg);}
  1962.  
  1963. .eh4 {width: 50px;
  1964. height: 74px;
  1965. background-color: #685A93;
  1966. left: 111px;
  1967. top: -12px;
  1968. border-top-left-radius: 50px;
  1969. -webkit-transform:rotate(26deg);
  1970.    -moz-transform:rotate(26deg);
  1971.     -ms-transform:rotate(26deg);
  1972.      -o-transform:rotate(26deg);
  1973.         transform:rotate(26deg);}
  1974.  
  1975. .eh5 {width: 42px;
  1976. height: 103px;
  1977. background-color: #685A93;
  1978. left: -21px;
  1979. top: -25px;
  1980. border-top-left-radius: 50px;
  1981. -webkit-transform:rotate(-24deg);
  1982.    -moz-transform:rotate(-24deg);
  1983.     -ms-transform:rotate(-24deg);
  1984.      -o-transform:rotate(-24deg);
  1985.         transform:rotate(-24deg);}
  1986.  
  1987. .evil h2 {top: 323px;
  1988. font-family: tahoma;
  1989. font-size: 34px;
  1990. font-weight: normal;
  1991. left: 33px;
  1992. color: #414141;}
  1993.  
  1994. .evil_logo {width: 13px;
  1995. height: 13px;
  1996. overflow: hidden;
  1997. top: 243px;
  1998. border-radius: 50%;
  1999. border: 2px solid #D5D5D5;
  2000. left: 42px;}
  2001.  
  2002. .evil_logo p {color: #D5D5D5;
  2003. font-size: 15px;
  2004. line-height: 17px;
  2005. font-family: tahoma;}
  2006.  
  2007. /*********************************************/
  2008.  
  2009. @media (min-width: 992px) and (max-width: 1199px) {
  2010.  
  2011. }
  2012.  
  2013. @media (min-width: 768px) and (max-width: 991px) {
  2014.  .container {width: 790px;
  2015.     -webkit-transform: scale(0.9);
  2016. -moz-transform: scale(0.9);
  2017. -ms-transform: scale(0.9);
  2018. -o-transform: scale(0.9);
  2019. transform: scale(0.9);
  2020. }
  2021.  .jerry {left: 130px;}
  2022.  .evil {left: 270px;}
  2023.  .bill {margin-left: 10px;}
  2024. }
  2025.  
  2026. @media (max-width: 767px) {
  2027.  
  2028. .container {width:530px}
  2029.  
  2030. .bill {margin: 0 auto; float: none;}
  2031.  
  2032. .jerry {margin: 0 auto;
  2033. top: 195px;
  2034. float:none;
  2035. left:0px;}
  2036.  
  2037. .evil {margin: 0 auto;
  2038. top: 400px;
  2039. float:none;
  2040. left:0px;
  2041. }
  2042.  
  2043. h6 {margin-bottom: 70px;}
  2044.  
  2045. }
  2046.  
  2047. @media (max-width: 400px) {
  2048.  
  2049.     .container {width: 370px;
  2050.             -webkit-transform: scale(0.8);
  2051. -moz-transform: scale(0.8);
  2052. -ms-transform: scale(0.8);
  2053. -o-transform: scale(0.8);
  2054. transform: scale(0.8);
  2055. padding-top: 0px !important;
  2056. }
  2057.  
  2058. h6 {margin-bottom: 80px;}
  2059.  
  2060. }</style>
  2061.     </head>
  2062.  
  2063.     <body>
  2064.  
  2065.         <div class="container">
  2066.  
  2067.             <div class="bill">
  2068.  
  2069.                 <div class="lights">
  2070.                     <span class="white_light"></span>
  2071.                     <span class="dark_light"></span>
  2072.                 </div>
  2073.                 <div class="hair">
  2074.                     <span class="hair1"></span>
  2075.                     <span class="hair1 make_it_left_hair1"></span>
  2076.                     <span class="hair2"></span>
  2077.                 </div>
  2078.  
  2079.                 <div class="eyes">
  2080.                     <div class="eye_animate"></div>
  2081.  
  2082.                     <div class="glasses"></div>
  2083.                         <div class="white_part">
  2084.                             <div class="brown_eye">
  2085.                                 <span class="black_part"></span>
  2086.                             </div>
  2087.                         </div>
  2088.                 </div>
  2089.  
  2090.                 <div class="black_tie">
  2091.                     <span class="right_tie">
  2092.                         <div class="top_tie"></div>
  2093.                         <div class="down_tie"></div>
  2094.                     </span>
  2095.                     <span class="left_tie">
  2096.                         <div class="top_tie"></div>
  2097.                         <div class="down_tie"></div>
  2098.                     </span>
  2099.                 </div>
  2100.  
  2101.                 <div class="smile"></div>
  2102.  
  2103.                 <div class="arm"></div>
  2104.                 <div class="hand"><span class="hand_parts"><span></div>
  2105.  
  2106.                 <div class="arm make_it_right_arm"></div>
  2107.                 <div class="hand make_it_right_hand"><span class="hand_parts"><span></div>
  2108.  
  2109.                 <div class="curves">
  2110.                     <span class="curve1"></span>
  2111.                     <span class="curve1 make_it_left_curve"></span>
  2112.                     <span class="curve2"></span>
  2113.                 </div>
  2114.  
  2115.                 <div class="clothes">
  2116.                     <div class="main"></div>
  2117.                     <div class="blue_borders"></div>
  2118.                     <div class="right_shirt"></div>
  2119.                     <div class="right_shirt make_it_left"></div>
  2120.                     <div class="bottom"></div>
  2121.                 </div>
  2122.  
  2123.                 <div class="pocket">
  2124.                     <div class="logo"></div>
  2125.                     <span class="lines"></span>
  2126.                 </div>
  2127.  
  2128.                 <div class="legs">
  2129.                     <div class="right_leg"></div>
  2130.                     <div class="right_leg make_it_left_leg"></div>
  2131.                     <div class="shoes"><span class="small_shoes"></span></div>
  2132.                     <div class="shoes make_it_left_shoes"><span class="small_shoes"></span></div>
  2133.                 </div>
  2134.  
  2135.                 <h2>Bill</h2>
  2136.             </div>
  2137.  
  2138.             <div class="jerry">
  2139.  
  2140.                 <div class="lights">
  2141.                     <span class="white_light"></span>
  2142.                     <span class="dark_light"></span>
  2143.                 </div>
  2144.                 <div class="jerry_hair">
  2145.                     <ul>
  2146.                     <li class="h1"></li>
  2147.                     <li class="h2"></li>
  2148.                     <li class="h3"></li>
  2149.                     <li class="h4"></li>
  2150.                     <li class="h5"></li>
  2151.                     <li class="h6"></li>
  2152.                     <li class="h7"></li>
  2153.                     <li class="h8"></li>
  2154.                     <li class="h9"></li>
  2155.                     <li class="h10"></li>
  2156.                     <li class="h11"></li>
  2157.                     <li class="h12"></li>
  2158.                     </ul>
  2159.                 </div>
  2160.  
  2161.                 <div class="eyes1">
  2162.                     <div class="eye_animate"></div>
  2163.  
  2164.                     <div class="glasses"></div>
  2165.                         <div class="white_part">
  2166.                             <div class="brown_eye">
  2167.                                 <span class="black_part"></span>
  2168.                             </div>
  2169.                         </div>
  2170.                 </div>
  2171.  
  2172.                 <div class="eyes2">
  2173.                     <div class="eye_animate"></div>
  2174.  
  2175.                     <div class="glasses"></div>
  2176.                         <div class="white_part">
  2177.                             <div class="brown_eye">
  2178.                                 <span class="black_part"></span>
  2179.                             </div>
  2180.                         </div>
  2181.                 </div>
  2182.  
  2183.                 <div class="jerry_hand">
  2184.                     <div class="jerry_lh"></div>
  2185.                     <div class="animated_lh">
  2186.                         <span class="gloves_lh"></span>
  2187.                         <span class="gloves_lh2"></span>
  2188.                     </div>
  2189.  
  2190.                     <div class="jerry_rh"></div>
  2191.                     <span class="gloves_rh"></span>
  2192.                 </div>
  2193.  
  2194.                 <div class="black_tie">
  2195.                     <span class="right_tie">
  2196.                         <div class="top_tie"></div>
  2197.                         <div class="down_tie"></div>
  2198.                     </span>
  2199.                     <span class="left_tie">
  2200.                         <div class="top_tie"></div>
  2201.                         <div class="down_tie"></div>
  2202.                     </span>
  2203.                 </div>
  2204.  
  2205.                 <div class="jerry_smile">
  2206.                     <span class="teeth1"></span>
  2207.                     <span class="teeth2"></span>
  2208.                 </div>
  2209.  
  2210.                 <div class="curves">
  2211.                     <span class="jerry_curve1"></span>
  2212.                     <span class="jerry_curve1 jerry_left_curve"></span>
  2213.                     <span class="jerry_curve2"></span>
  2214.                 </div>
  2215.  
  2216.                 <div class="clothes">
  2217.                     <div class="main_jerry"></div>
  2218.                     <div class="right_shirt jerry_right_shirt"></div>
  2219.                     <div class="right_shirt jerry_left_shirt"></div>
  2220.                     <div class="jerry_bottom"></div>
  2221.                 </div>
  2222.  
  2223.                 <div class="pocket">
  2224.                     <div class="logo"></div>
  2225.                     <span class="lines"></span>
  2226.                 </div>
  2227.  
  2228.                 <div class="legs">
  2229.                     <div class="jerry_shoes"><span class="jerry_small_shoes"></span></div>
  2230.                     <div class="jerry_shoes jerry_left_shoes"><span class="jerry_small_shoes"></span></div>
  2231.                 </div>
  2232.  
  2233.                 <h2>Jerry</h2>
  2234.  
  2235.             </div>
  2236.  
  2237.             <div class="evil">
  2238.  
  2239.                 <ul class="evil_hair">
  2240.                     <li class="eh1"></li>
  2241.                     <li class="eh2"></li>
  2242.                     <li class="eh3"></li>
  2243.                     <li class="eh4"></li>
  2244.                     <li class="eh5"></li>
  2245.                 </ul>
  2246.  
  2247.                 <div class="eyes">
  2248.                     <div class="eye_animate"></div>
  2249.  
  2250.                     <div class="glasses"></div>
  2251.                         <div class="white_part">
  2252.                             <div class="brown_eye">
  2253.                                 <span class="black_part"></span>
  2254.                             </div>
  2255.                         </div>
  2256.                 </div>
  2257.  
  2258.                 <div class="black_tie">
  2259.                     <span class="right_tie">
  2260.                         <div class="top_tie"></div>
  2261.                         <div class="down_tie"></div>
  2262.                     </span>
  2263.                     <span class="left_tie">
  2264.                         <div class="top_tie"></div>
  2265.                         <div class="down_tie"></div>
  2266.                     </span>
  2267.                 </div>
  2268.  
  2269.                 <div class="evil_mouth">
  2270.                     <span class="evil_teeth"></span>
  2271.                     <span class="evil_teeth1"></span>
  2272.                 </div>
  2273.  
  2274.                 <div class="clothes">
  2275.                     <div class="right_shirt evil_right_shirt"></div>
  2276.                     <div class="right_shirt evil_left_shirt"></div>
  2277.                     <div class="evil_bottom"></div>
  2278.                     <div class="evil_logo"><p>M</p></div>
  2279.                 </div>
  2280.  
  2281.                 <div class="legs">
  2282.                     <div class="evil_right_leg"></div>
  2283.                     <div class="evil_right_leg evil_left_leg"></div>
  2284.                     <div class="shoes evil_right_shoes"><span class="small_shoes"></span></div>
  2285.                     <div class="shoes evil_left_shoes"><span class="small_shoes"></span></div>
  2286.                 </div>
  2287.                 <div class="evil_hand">
  2288.                     <div class="evil_rh">
  2289.                         <span class="evil_gloves_rh"></span>
  2290.                     </div>
  2291.                     <div class="evil_lh">
  2292.                         <span class="evil_gloves_lh"></span>
  2293.                     </div>
  2294.                 </div>
  2295.                 <h2>Evil</h2>
  2296.             </div>
  2297.         </div>
  2298.  
  2299.     </body>
  2300.  
  2301. </HTML>

如有错误，欢迎联系我改正，非常感谢！！！

CSS3小黄人的更多相关文章

  1. CSS3 小黄人案例

    使用 CSS3 和 HTML5 制作一个小黄人. 结构代码: <div class="wrap"> <!-- 头发 --> <div class=&q ...

  2. css3实现小黄人

    效果就像这样: 不废话,直接上代码! hrml代码: <!DOCTYPE html> <html> <head lang="zh"> <m ...

  3. 纯CSS3画出小黄人并实现动画效果

    前言 前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...

  4. CSS3实现小黄人动画

    转载请注明出处,谢谢! 每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,突然开窍,于是拿他提供的demo试了一下,感觉很棒!下图为demo提供的动画帧设计稿. 自己也想说搞 ...

  5. [置顶] 几行代码实现ofo首页小黄人眼睛加速感应转动

    最新版的ofo 小黄车的首页小黄人眼睛随重力而转动,感觉有点炫酷,学习一下吧,以下代码是在xamarin android下实现 ofo首页效果图: xamarin android实现效果: 实现思路: ...

  6. Python turtle模块小黄人程序

    讲解Python初级课程的turtle模块,简单粗暴的编写了小黄人的程序.程序还需要进一步优化.难点就是要搞清楚turtle在绘制图形过程中的方向变化. import turtle t = turtl ...

  7. 小黄人IP营销的四种玩法思维导图

    小黄人IP营销的四种玩法思维导图 ------------------------------ 本人微信公众帐号: 心禅道(xinchandao) 本人微信公众帐号:双色球预测合买(ssqyuce)

  8. 静态分析第三发 so文件分析（小黄人快跑)

    本文作者:i春秋作家——HAI_ 0×00 工具 1.IDA pro 2.Android Killer 0×01 环境 小黄人快跑 下载地址http://download.csdn.net/downl ...

  9. 音频算法之小黄人变声 附完整C代码

    前面提及到<大话音频变声原理 附简单示例代码>与<声音变调算法PitchShift(模拟汤姆猫) 附完整C++算法实现代码> 都稍微讲过变声的原理和具体实现. 大家都知道,算法 ...

随机推荐

  1. [网络流]小M的作物

    小\(M\)的作物(最小割) 做的第一道网络流,因为一个智障错误调了好久嘤嘤嘤 题目描述 小\(M\)在\(MC\)里开辟了两块巨大的耕地\(A\)和\(B\)(你可以认为容量是无穷),现在,小\(P ...

  2. Linux crontab 命令格式与举例

    每五分钟执行  */5 * * * * 每小时执行     0 * * * * 每天执行        0 0 * * * 每周执行       0 0 * * 0 每月执行        0 0 1 ...

  3. Java虚拟机性能监控与调优

    1 基于JDK命令行工具的监控 1.1 JVM的参数类型 1.1.1 标准参数 在JVM的各个版本基本上保持不变,很稳定的. -help -server -client -version -showv ...

  4. git<撤销本地修改与回退版本>

    1. 使用 git checkout 撤销本地修改 即放弃对本地已修改但尚未提交的文件的修改,还原其到未修改前的状态. 注意: 已 add/ commit 的文件不适用个方法,应该用本文提到的第二种方 ...

  5. Python word_cloud 样例 标签云系列（三）

    转载地址:https://zhuanlan.zhihu.com/p/20436642word_cloud/examples at master · amueller/word_cloud · GitH ...

  6. svnsync备份

    参考:https://www.cnblogs.com/zz0412/p/svnsync.html https://blog.csdn.net/windone0109/article/details/4 ...

  7. 「Vue」过滤器

    #全局过滤器要写在var vue之前<td>{{item.time | ctime }}</td>Vue.filter('ctime'(过滤器名),function(data( ...

  8. openstack指南

    1.openstack官网 http://www.openstack.org/ 2.openstack源码地址 https://github.com/openstack 3.openstack的pac ...

  9. SVN不能提交代码

    Error: Some resources were not reverted. Attempted to lock an already-locked dir svn: Working copy ' ...

  10. 【leetcode 简单】 第八十四题 两个数组的交集

    给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2] 示例 2: 输入: nums1 = [4,9,5], ...