宝宝大便白细胞0-3:强！用CSS画个灰太狼 - 听雨轩 - JavaEye技术网站

来源：百度文库 编辑：偶看新闻 时间：2024/04/28 05:08:47

强！用CSS画个灰太狼

文章分类:Web前端

请用FireFox或非IE浏览器看，不听劝告者后果自负。

 

Html代码
  1.   
  2.   
  3.   
  4.   
  5. 我是灰太狼  
  6.   
  7. * {  
  8.     margin: 0;  
  9.     padding: 0;  
  10. }  
  11. #bigBigWolf {  
  12.     position: absolute;  
  13.     left: 50%;  
  14.     top: 50%;  
  15.     margin-left: -300px;  
  16.     margin-top: -300px;  
  17.     width: 600px;  
  18.     height: 600px;  
  19. }  
  20. #bigBigWolf div {  
  21.     position: absolute;  
  22. }  
  23. #bigBigWolf #url a {  
  24.     position: absolute;  
  25.     left: 0;  
  26.     top: 0;  
  27.     width: 600px;  
  28.     height: 600px;  
  29.     z-index: 100;  
  30. }  
  31. #bigBigWolf .face {  
  32.     left: 127px;  
  33.     bottom: 67px;  
  34.     width: 380px;  
  35.     height: 380px;  
  36.     border: 3px solid #181818;  
  37.     background: #666B6F;  
  38.     z-index: 0;  
  39.     -webkit-border-radius: 230px 180px 300px 220px;  
  40.     -moz-border-radius: 230px 180px 300px 220px;  
  41.     transform: rotate(60deg);  
  42.     -webkit-transform: rotate(60deg);  
  43.     -moz-transform: rotate(60deg);  
  44.     -o-transform: rotate(60deg);  
  45. }  
  46. #bigBigWolf .face .left {  
  47.     left: 30px;  
  48.     top: 317px;  
  49.     width: 180px;  
  50.     height: 106px;  
  51.     border: 3px solid #181818;  
  52.     border-top: 0;  
  53.     background: #666B6F;  
  54.     z-index: 10;  
  55.     -webkit-border-bottom-left-radius: 2800px 1200px;  
  56.     -moz-border-radius-bottomleft: 2800px 1200px;  
  57.     transform: rotate(30deg);  
  58.     -webkit-transform: rotate(30deg);  
  59.     -moz-transform: rotate(30deg);  
  60.     -o-transform: rotate(30deg);  
  61. }  
  62. #bigBigWolf .face .right {  
  63.     left: 105px;  
  64.     top: -45px;  
  65.     width: 160px;  
  66.     height: 90px;  
  67.     border: 3px solid #181818;  
  68.     border-bottom: 0;  
  69.     background: #666B6F;  
  70.     z-index: 10;  
  71.     -webkit-border-top-left-radius: 2800px 2000px;  
  72.     -moz-border-radius-topleft: 2800px 2000px;  
  73.     transform: rotate(335deg);  
  74.     -webkit-transform: rotate(335deg);  
  75.     -moz-transform: rotate(335deg);  
  76.     -o-transform: rotate(335deg);  
  77. }  
  78. #bigBigWolf .face .cover1 {  
  79.     left: 160px;  
  80.     top: 415px;  
  81.     width: 28px;  
  82.     height: 40px;  
  83.     border: 3px solid #181818;  
  84.     border-bottom: 0;  
  85.     background: #FFF;  
  86.     z-index: 20;  
  87.     -webkit-border-top-left-radius: 600px 1200px;  
  88.     -webkit-border-top-right-radius: 400px 700px;  
  89.     -webkit-border-bottom-left-radius: 400px 150px;  
  90.     -webkit-border-bottom-right-radius: 400px 150px;  
  91.     -moz-border-radius-topleft: 600px 1200px;  
  92.     -moz-border-radius-topright: 400px 700px;  
  93.     -moz-border-radius-bottomleft: 400px 150px;  
  94.     -moz-border-radius-bottomright: 400px 150px;  
  95. }  
  96. #bigBigWolf .face .cover2 {  
  97.     left: 163px;  
  98.     top: 433px;  
  99.     width: 40px;  
  100.     height: 40px;  
  101.     background: #FFF;  
  102.     z-index: 30;  
  103.     -webkit-border-radius: 20px;  
  104.     -moz-border-radius: 20px;  
  105. }  
  106. #bigBigWolf .face .cover3 {  
  107.     left: 53px;  
  108.     top: 285px;  
  109.     width: 74px;  
  110.     height: 74px;  
  111.     background: #666B6F;  
  112.     z-index: 40;  
  113.     -webkit-border-radius: 37px;  
  114.     -moz-border-radius: 37px;  
  115. }  
  116. #bigBigWolf .face .cover4 {  
  117.     left: 227px;  
  118.     top: -80px;  
  119.     width: 25px;  
  120.     height: 40px;  
  121.     border: 3px solid #181818;  
  122.     border-bottom: 0;  
  123.     background: #FFF;  
  124.     z-index: 20;  
  125.     -webkit-border-top-left-radius: 600px 1200px;  
  126.     -webkit-border-top-right-radius: 400px 700px;  
  127.     -webkit-border-bottom-left-radius: 400px 150px;  
  128.     -webkit-border-bottom-right-radius: 400px 150px;  
  129.     -moz-border-radius-topleft: 600px 1200px;  
  130.     -moz-border-radius-topright: 400px 700px;  
  131.     -moz-border-radius-bottomleft: 400px 150px;  
  132.     -moz-border-radius-bottomright: 400px 150px;  
  133.     transform: rotate(170deg);  
  134.     -webkit-transform: rotate(170deg);  
  135.     -moz-transform: rotate(170deg);  
  136.     -o-transform: rotate(170deg);  
  137. }  
  138. #bigBigWolf .face .cover5 {  
  139.     left: 214px;  
  140.     top: -90px;  
  141.     width: 60px;  
  142.     height: 30px;  
  143.     background: #FFF;  
  144.     z-index: 40;  
  145.     transform: rotate(28deg);  
  146.     -webkit-transform: rotate(28deg);  
  147.     -moz-transform: rotate(28deg);  
  148.     -o-transform: rotate(28deg);  
  149. }  
  150. #bigBigWolf .ear {  
  151.     z-index: 0;  
  152. }  
  153. #bigBigWolf .ear .left {  
  154.     left: 48px;  
  155.     top: 167px;  
  156.     width: 180px;  
  157.     height: 120px;  
  158.     border: 3px solid #181818;  
  159.     border-right: 0;  
  160.     background: #666B6F;  
  161.     z-index: 0;  
  162.     -webkit-border-top-left-radius: 295px 200px;  
  163.     -moz-border-radius-topleft: 295px 200px;  
  164.     transform: rotate(51deg);  
  165.     -webkit-transform: rotate(51deg);  
  166.     -moz-transform: rotate(51deg);  
  167.     -o-transform: rotate(51deg);  
  168. }  
  169. #bigBigWolf .ear .left .inner {  
  170.     left: -3px;  
  171.     top: 88px;  
  172.     width: 180px;  
  173.     height: 30px;  
  174.     border: 3px solid #181818;  
  175.     border-right: 0;  
  176.     background: #96979C;  
  177.     z-index: 10;  
  178.     -webkit-border-top-left-radius: 1000px 200px;  
  179.     -moz-border-radius-topleft: 1000px 200px;  
  180. }  
  181. #bigBigWolf .ear .left .cover1 {  
  182.     left: 83px;  
  183.     top: 30px;  
  184.     width: 132px;  
  185.     height: 65px;  
  186.     background: #666B6F;  
  187.     z-index: 20;  
  188.     -webkit-border-bottom-right-radius: 1200px 200px;  
  189.     -moz-border-radius-bottomright: 1200px 200px;  
  190.     transform: rotate(90deg);  
  191.     -webkit-transform: rotate(90deg);  
  192.     -moz-transform: rotate(90deg);  
  193.     -o-transform: rotate(90deg);  
  194. }  
  195. #bigBigWolf .ear .left .cover2 {  
  196.     left: 111px;  
  197.     top: 91px;  
  198.     width: 12px;  
  199.     height: 8px;  
  200.     border: 3px solid #181818;  
  201.     border-right: 0;  
  202.     background: #666B6F;  
  203.     z-index: 30;  
  204.     -webkit-border-top-left-radius: 30px 20px;  
  205.     -moz-border-radius-topleft: 30px 20px;  
  206.     transform: rotate(345deg);  
  207.     -webkit-transform: rotate(345deg);  
  208.     -moz-transform: rotate(345deg);  
  209.     -o-transform: rotate(345deg);  
  210. }  
  211. #bigBigWolf .ear .left .cover3 {  
  212.     left: 114px;  
  213.     top: 104px;  
  214.     width: 12px;  
  215.     height: 6px;  
  216.     border: 3px solid #181818;  
  217.     border-right: 0;  
  218.     background: #666B6F;  
  219.     z-index: 30;  
  220.     -webkit-border-top-left-radius: 30px 20px;  
  221.     -moz-border-radius-topleft: 30px 20px;  
  222.     transform: rotate(325deg);  
  223.     -webkit-transform: rotate(325deg);  
  224.     -moz-transform: rotate(325deg);  
  225.     -o-transform: rotate(325deg);  
  226. }  
  227. #bigBigWolf .ear .left .cover4 {  
  228.     left: 123px;  
  229.     top: 113px;  
  230.     width: 11px;  
  231.     height: 4px;  
  232.     border: 3px solid #181818;  
  233.     border-right: 0;  
  234.     border-top: 0;  
  235.     background: #666B6F;  
  236.     z-index: 30;  
  237.     -webkit-border-bottom-left-radius: 30px 20px;  
  238.     -moz-border-radius-bottomleft: 30px 20px;  
  239.     transform: rotate(62deg);  
  240.     -webkit-transform: rotate(62deg);  
  241.     -moz-transform: rotate(62deg);  
  242.     -o-transform: rotate(62deg);  
  243. }  
  244. #bigBigWolf .ear .right {  
  245.     left: 340px;  
  246.     top: 78px;  
  247.     width: 140px;  
  248.     height: 100px;  
  249.     border: 3px solid #181818;  
  250.     border-left: 0;  
  251.     background: #666B6F;  
  252.     z-index: 10;  
  253.     -webkit-border-top-right-radius: 245px 190px;  
  254.     -moz-border-radius-topright: 245px 190px;  
  255.     transform: rotate(275deg);  
  256.     -webkit-transform: rotate(275deg);  
  257.     -moz-transform: rotate(275deg);  
  258.     -o-transform: rotate(275deg);  
  259. }  
  260. #bigBigWolf .ear .right .inner {  
  261.     left: -1px;  
  262.     top: 68px;  
  263.     width: 140px;  
  264.     height: 30px;  
  265.     border: 3px solid #181818;  
  266.     border-left: 0;  
  267.     background: #96979C;  
  268.     z-index: 10;  
  269.     -webkit-border-top-right-radius: 1200px 300px;  
  270.     -moz-border-radius-topright: 1200px 300px;  
  271. }  
  272. #bigBigWolf .ear .right .cover1 {  
  273.     left: -49px;  
  274.     top: 25px;  
  275.     width: 120px;  
  276.     height: 40px;  
  277.     border: 3px solid #181818;  
  278.     border-bottom: 0;  
  279.     background: #666B6F;  
  280.     z-index: 20;  
  281.     -webkit-border-top-right-radius: 1200px 300px;  
  282.     -moz-border-radius-topright: 1200px 300px;  
  283.     transform: rotate(101deg);  
  284.     -webkit-transform: rotate(101deg);  
  285.     -moz-transform: rotate(101deg);  
  286.     -o-transform: rotate(101deg);  
  287. }  
  288. #bigBigWolf .ear .right .cover2 {  
  289.     left: -135px;  
  290.     top: 117px;  
  291.     width: 145px;  
  292.     height: 40px;  
  293.     border: 3px solid #181818;  
  294.     border-bottom: 0;  
  295.     background: #666B6F;  
  296.     z-index: 30;  
  297.     -webkit-border-top-right-radius: 1100px 300px;  
  298.     -moz-border-radius-topright: 1100px 300px;  
  299.     transform: rotate(133deg);  
  300.     -webkit-transform: rotate(133deg);  
  301.     -moz-transform: rotate(133deg);  
  302.     -o-transform: rotate(133deg);  
  303. }  
  304. #bigBigWolf .ear .right .cover3 {  
  305.     left: -85px;  
  306.     top: 15px;  
  307.     width: 80px;  
  308.     height: 80px;  
  309.     background: #666B6F;  
  310.     z-index: 40;  
  311. }  
  312. #bigBigWolf .ear .right .cover4 {  
  313.     left: -142px;  
  314.     top: 144px;  
  315.     width: 40px;  
  316.     height: 40px;  
  317.     background: #666B6F;  
  318.     z-index: 50;  
  319.     -webkit-border-radius: 20px;  
  320.     -moz-border-radius: 20px;  
  321. }  
  322. #bigBigWolf .ear .right .cover5 {  
  323.     left: 32px;  
  324.     top: 87px;  
  325.     width: 30px;  
  326.     height: 30px;  
  327.     border: 3px solid #181818;  
  328.     border-bottom: 0;  
  329.     border-left: 0;  
  330.     background: #FFF;  
  331.     z-index: 50;  
  332.     -webkit-border-radius: 30px;  
  333.     -moz-border-radius: 30px;  
  334.     transform: rotate(313deg);  
  335.     -webkit-transform: rotate(313deg);  
  336.     -moz-transform: rotate(313deg);  
  337.     -o-transform: rotate(313deg);  
  338. }  
  339. #bigBigWolf .hat {  
  340.     left: 137px;  
  341.     top: 115px;  
  342.     width: 238px;  
  343.     height: 100px;  
  344.     border: 3px solid #181818;  
  345.     background: #E09E86;  
  346.     z-index: 40;  
  347.     -webkit-border-top-left-radius: 2000px 1000px;  
  348.     -webkit-border-top-right-radius: 700px 700px;  
  349.     -webkit-border-bottom-left-radius: 300px 200px;  
  350.     -webkit-border-bottom-right-radius: 450px 450px;  
  351.     -moz-border-radius-topleft: 2000px 1000px;  
  352.     -moz-border-radius-topright: 700px 700px;  
  353.     -moz-border-radius-bottomleft: 300px 200px;  
  354.     -moz-border-radius-bottomright: 450px 450px;  
  355.     transform: rotate(338deg);  
  356.     -webkit-transform: rotate(338deg);  
  357.     -moz-transform: rotate(338deg);  
  358.     -o-transform: rotate(338deg);  
  359. }  
  360. #bigBigWolf .hat .inner {  
  361.     right: -1px;  
  362.     top: 1px;  
  363.     width: 238px;  
  364.     height: 80px;  
  365.     border: 3px solid #181818;  
  366.     background: #CF6A36;  
  367.     z-index: 0;  
  368.     -webkit-border-top-left-radius: 2400px 1200px;  
  369.     -webkit-border-top-right-radius: 800px 800px;  
  370.     -webkit-border-bottom-left-radius: 400px 200px;  
  371.     -webkit-border-bottom-right-radius: 450px 450px;  
  372.     -moz-border-radius-topleft: 2400px 1200px;  
  373.     -moz-border-radius-topright: 800px 800px;  
  374.     -moz-border-radius-bottomleft: 400px 200px;  
  375.     -moz-border-radius-bottomright: 450px 450px;  
  376.     transform: rotate(357deg);  
  377.     -webkit-transform: rotate(357deg);  
  378.     -moz-transform: rotate(357deg);  
  379.     -o-transform: rotate(357deg);  
  380. }  
  381. #bigBigWolf .hat .patch {  
  382.     right: -3px;  
  383.     top: -7px;  
  384.     width: 110px;  
  385.     height: 50px;  
  386.     border: 3px solid #181818;  
  387.     background: #EFC978;  
  388.     z-index: 10;  
  389.     -webkit-border-top-left-radius: 500px 300px;  
  390.     -webkit-border-top-right-radius: 300px 200px;  
  391.     -webkit-border-bottom-left-radius: 100px 100px;  
  392.     -webkit-border-bottom-right-radius: 100px 100px;  
  393.     -moz-border-radius-topleft: 500px 300px;  
  394.     -moz-border-radius-topright: 300px 200px;  
  395.     -moz-border-radius-bottomleft: 100px 100px;  
  396.     -moz-border-radius-bottomright: 100px 100px;  
  397.     transform: rotate(20deg);  
  398.     -webkit-transform: rotate(20deg);  
  399.     -moz-transform: rotate(20deg);  
  400.     -o-transform: rotate(20deg);  
  401. }  
  402. #bigBigWolf .hat .patch .line1, #bigBigWolf .hat .patch .line2, #bigBigWolf .hat .patch .line3, #bigBigWolf .hat .patch .line4, #bigBigWolf .hat .patch .line5, #bigBigWolf .hat .patch .line6, #bigBigWolf .hat .patch .line7, #bigBigWolf .hat .patch .line8, #bigBigWolf .hat .patch .line9, #bigBigWolf .hat .patch .line10 {  
  403.     left: -7px;  
  404.     top: 30px;  
  405.     width: 18px;  
  406.     height: 2px;  
  407.     font-size: 0;  
  408.     background: #181818;  
  409.     z-index: 20px;  
  410.     transform: rotate(350deg);  
  411.     -webkit-transform: rotate(350deg);  
  412.     -moz-transform: rotate(350deg);  
  413.     -o-transform: rotate(350deg);  
  414. }  
  415. #bigBigWolf .hat .patch .line2 {  
  416.     left: -13px;  
  417.     top: 42px;  
  418.     width: 20px;  
  419.     transform: rotate(340deg);  
  420.     -webkit-transform: rotate(340deg);  
  421.     -moz-transform: rotate(340deg);  
  422.     -o-transform: rotate(340deg);  
  423. }  
  424. #bigBigWolf .hat .patch .line3 {  
  425.     left: 5px;  
  426.     top: 50px;  
  427.     width: 17px;  
  428.     transform: rotate(300deg);  
  429.     -webkit-transform: rotate(300deg);  
  430.     -moz-transform: rotate(300deg);  
  431.     -o-transform: rotate(300deg);  
  432. }  
  433. #bigBigWolf .hat .patch .line4 {  
  434.     left: 20px;  
  435.     top: 53px;  
  436.     width: 17px;  
  437.     transform: rotate(270deg);  
  438.     -webkit-transform: rotate(270deg);  
  439.     -moz-transform: rotate(270deg);  
  440.     -o-transform: rotate(270deg);  
  441. }  
  442. #bigBigWolf .hat .patch .line5 {  
  443.     left: 35px;  
  444.     top: 50px;  
  445.     width: 14px;  
  446.     transform: rotate(290deg);  
  447.     -webkit-transform: rotate(290deg);  
  448.     -moz-transform: rotate(290deg);  
  449.     -o-transform: rotate(290deg);  
  450. }  
  451. #bigBigWolf .hat .patch .line6 {  
  452.     left: 50px;  
  453.     top: 52px;  
  454.     width: 19px;  
  455.     transform: rotate(275deg);  
  456.     -webkit-transform: rotate(275deg);  
  457.     -moz-transform: rotate(275deg);  
  458.     -o-transform: rotate(275deg);  
  459. }  
  460. #bigBigWolf .hat .patch .line7 {  
  461.     left: 70px;  
  462.     top: 50px;  
  463.     width: 15px;  
  464.     transform: rotate(290deg);  
  465.     -webkit-transform: rotate(260deg);  
  466.     -moz-transform: rotate(260deg);  
  467.     -o-transform: rotate(260deg);  
  468. }  
  469. #bigBigWolf .hat .patch .line8 {  
  470.     left: 85px;  
  471.     top: 51px;  
  472.     width: 19px;  
  473.     transform: rotate(250deg);  
  474.     -webkit-transform: rotate(250deg);  
  475.     -moz-transform: rotate(250deg);  
  476.     -o-transform: rotate(250deg);  
  477. }  
  478. #bigBigWolf .hat .patch .line9 {  
  479.     left: 102px;  
  480.     top: 45px;  
  481.     width: 13px;  
  482.     transform: rotate(230deg);  
  483.     -webkit-transform: rotate(230deg);  
  484.     -moz-transform: rotate(230deg);  
  485.     -o-transform: rotate(230deg);  
  486. }  
  487. #bigBigWolf .hat .patch .line10 {  
  488.     left: 106px;  
  489.     top: 34px;  
  490.     width: 12px;  
  491.     transform: rotate(220deg);  
  492.     -webkit-transform: rotate(220deg);  
  493.     -moz-transform: rotate(220deg);  
  494.     -o-transform: rotate(220deg);  
  495. }  
  496. #bigBigWolf .eye {  
  497.     left: 213px;  
  498.     top: 221px;  
  499.     width: 287px;  
  500.     height: 185px;  
  501.     z-index: 20;  
  502. }  
  503. #bigBigWolf .eye .left, #bigBigWolf .eye .right {  
  504.     width: 121px;  
  505.     height: 121px;  
  506.     border: 3px solid #181818;  
  507.     background: #DBDBDB;  
  508.     z-index: 0;  
  509.     -webkit-border-radius: 61px;  
  510.     -moz-border-radius: 61px;  
  511. }  
  512. #bigBigWolf .eye .left {  
  513.     left: 0;  
  514.     bottom: 0;  
  515. }  
  516. #bigBigWolf .eye .right {  
  517.     right: 0;  
  518.     top: 0;  
  519. }  
  520. #bigBigWolf .eye .inner {  
  521.     left: 2px;  
  522.     top: 2px;  
  523.     width: 114px;  
  524.     height: 114px;  
  525.     background: #FFF;  
  526.     z-index: 10;  
  527.     -webkit-border-radius: 57px;  
  528.     -moz-border-radius: 57px;  
  529. }  
  530. #bigBigWolf .eye .pupil {  
  531.     left: 8px;  
  532.     top: 26px;  
  533.     width: 54px;  
  534.     height: 54px;  
  535.     border: 2px solid #181818;  
  536.     z-index: 20;  
  537.     -webkit-border-radius: 27px;  
  538.     -moz-border-radius: 27px;  
  539.     background: #404972;  
  540.     background: -webkit-gradient(linear, 43% 0%, 39% 100%, from(#181818), to(#455289), color-stop(1.0, #455289));  
  541.     background: -moz-linear-gradient(50% 25% 260deg, #181818, #455289, #455289 100%);  
  542.     -webkit-animation: 'pupil' 2s linear;  
  543.     -webkit-animation-iteration-count: infinite;  
  544. }  
  545. @-webkit-keyframes pupil {  
  546.     0% {  
  547.         left: 8px;  
  548.         top: 26px;  
  549.     }  
  550.     25% {  
  551.         left: 29px;  
  552.         top: 33px;  
  553.     }  
  554.     50% {  
  555.         left: 50px;  
  556.         top: 40px;  
  557.     }  
  558.     75% {  
  559.         left: 29px;  
  560.         top: 33px;  
  561.     }  
  562.     100% {  
  563.         left: 8px;  
  564.         top: 26px;  
  565.     }  
  566. }  
  567. #bigBigWolf .eye .pupil .inner {  
  568.     left: 9px;  
  569.     top: 9px;  
  570.     width: 36px;  
  571.     height: 36px;  
  572.     background: #1A1A1A;  
  573.     z-index: 30;  
  574.     -webkit-border-radius: 18px;  
  575.     -moz-border-radius: 18px;  
  576. }  
  577. #bigBigWolf .eye .light1 {  
  578.     left: 21px;  
  579.     bottom: 3px;  
  580.     width: 16px;  
  581.     height: 16px;  
  582.     background: #FFF;  
  583.     z-index: 40;  
  584.     -webkit-border-radius: 15px 7px 10px 10px;  
  585.     -moz-border-radius: 20px 7px 20px 10px;  
  586.     transform: rotate(320deg);  
  587.     -webkit-transform: rotate(320deg);  
  588.     -moz-transform: rotate(320deg);  
  589.     -o-transform: rotate(320deg);  
  590. }  
  591. #bigBigWolf .eye .light2 {  
  592.     left: 7px;  
  593.     bottom: 11px;  
  594.     width: 14px;  
  595.     height: 6px;  
  596.     background: #FFF;  
  597.     z-index: 40;  
  598.     -webkit-border-top-left-radius: 500px 300px;  
  599.     -webkit-border-top-right-radius: 300px 200px;  
  600.     -webkit-border-bottom-left-radius: 100px 100px;  
  601.     -webkit-border-bottom-right-radius: 100px 100px;  
  602.     -moz-border-radius-topleft: 20px 20px;  
  603.     -moz-border-radius-topright: 30px 20px;  
  604.     -moz-border-radius-bottomleft: 5px 5px;  
  605.     -moz-border-radius-bottomright: 5px 5px;  
  606.     transform: rotate(285deg);  
  607.     -webkit-transform: rotate(285deg);  
  608.     -moz-transform: rotate(285deg);  
  609.     -o-transform: rotate(285deg);  
  610. }  
  611. #bigBigWolf .eye .light3 {  
  612.     right: 2px;  
  613.     top: 4px;  
  614.     width: 30px;  
  615.     height: 13px;  
  616.     background: #FFF;  
  617.     z-index: 40;  
  618.     -webkit-border-top-left-radius: 40px 40px;  
  619.     -webkit-border-top-right-radius: 100px 50px;  
  620.     -webkit-border-bottom-left-radius: 15px 15px;  
  621.     -webkit-border-bottom-right-radius: 15px 15px;  
  622.     -moz-border-radius-topleft: 40px 40px;  
  623.     -moz-border-radius-topright: 100px 50px;  
  624.     -moz-border-radius-bottomleft: 15px 15px;  
  625.     -moz-border-radius-bottomright: 15px 15px;  
  626.     transform: rotate(20deg);  
  627.     -webkit-transform: rotate(20deg);  
  628.     -moz-transform: rotate(20deg);  
  629.     -o-transform: rotate(20deg);  
  630. }  
  631. #bigBigWolf .eyebrow {  
  632.     left: 187px;  
  633.     top: 173px;  
  634.     width: 280px;  
  635.     height: 130px;  
  636.     z-index: 70;  
  637. }  
  638. #bigBigWolf .eyebrow .left {  
  639.     left: 0;  
  640.     top: 48px;  
  641.     width: 110px;  
  642.     height: 40px;  
  643.     background: #181818;  
  644.     z-index: 0;  
  645.     -webkit-border-top-left-radius: 400px 200px;  
  646.     -webkit-border-top-right-radius: 400px 200px;  
  647.     -moz-border-radius-topleft: 400px 200px;  
  648.     -moz-border-radius-topright: 400px 200px;  
  649.     transform: rotate(330deg);  
  650.     -webkit-transform: rotate(330deg);  
  651.     -moz-transform: rotate(330deg);  
  652.     -o-transform: rotate(330deg);  
  653. }  
  654. #bigBigWolf .eyebrow .left .inner {  
  655.     left: 0;  
  656.     top: 20px;  
  657.     width: 120px;  
  658.     height: 30px;  
  659.     background: #666B6F;  
  660.     z-index: 0;  
  661.     -webkit-border-top-left-radius: 400px 200px;  
  662.     -webkit-border-top-right-radius: 400px 200px;  
  663.     -moz-border-radius-topleft: 400px 200px;  
  664.     -moz-border-radius-topright: 400px 200px;  
  665. }  
  666. #bigBigWolf .eyebrow .left .eyebrow1, #bigBigWolf .eyebrow .left .eyebrow2, #bigBigWolf .eyebrow .right .eyebrow1 {  
  667.     left: -22px;  
  668.     top: 36px;  
  669.     width: 22px;  
  670.     height: 2px;  
  671.     font-size: 0;  
  672.     background: #181818;  
  673.     z-index: 10px;  
  674.     transform: rotate(86deg);  
  675.     -webkit-transform: rotate(86deg);  
  676.     -moz-transform: rotate(86deg);  
  677.     -o-transform: rotate(86deg);  
  678. }  
  679. #bigBigWolf .eyebrow .left .eyebrow2 {  
  680.     left: -15px;  
  681.     top: 32px;  
  682.     width: 20px;  
  683. }  
  684. #bigBigWolf .eyebrow .right .eyebrow1 {  
  685.     left: 93px;  
  686.     top: 24px;  
  687.     width: 20px;  
  688. }  
  689. #bigBigWolf .eyebrow .right {  
  690.     right: 17px;  
  691.     top: -3px;  
  692.     width: 100px;  
  693.     height: 40px;  
  694.     background: #181818;  
  695.     z-index: 0;  
  696.     -webkit-border-top-left-radius: 400px 200px;  
  697.     -webkit-border-top-right-radius: 400px 200px;  
  698.     -moz-border-radius-topleft: 400px 200px;  
  699.     -moz-border-radius-topright: 400px 200px;  
  700.     transform: rotate(355deg);  
  701.     -webkit-transform: rotate(355deg);  
  702.     -moz-transform: rotate(355deg);  
  703.     -o-transform: rotate(355deg);  
  704. }  
  705. #bigBigWolf .eyebrow .right .inner {  
  706.     right: -7px;  
  707.     top: 20px;  
  708.     width: 120px;  
  709.     height: 30px;  
  710.     background: #666B6F;  
  711.     z-index: 0;  
  712.     -webkit-border-top-left-radius: 400px 200px;  
  713.     -webkit-border-top-right-radius: 400px 200px;  
  714.     -moz-border-radius-topleft: 400px 200px;  
  715.     -moz-border-radius-topright: 400px 200px;  
  716. }  
  717. #bigBigWolf .nose {  
  718.     right: 158px;  
  719.     bottom: 203px;  
  720.     width: 74px;  
  721.     height: 74px;  
  722.     z-index: 30;  
  723.     background: #4B4B4B;  
  724.     -webkit-border-radius: 160px 40px 160px 40px;  
  725.     -moz-border-radius: 160px 30px 160px 40px;  
  726.     transform: rotate(25deg);  
  727.     -webkit-transform: rotate(25deg);  
  728.     -moz-transform: rotate(25deg);  
  729.     -o-transform: rotate(25deg);  
  730. }  
  731. #bigBigWolf .nose .outer {  
  732.     right: 1px;  
  733.     top: -2px;  
  734.     width: 72px;  
  735.     height: 72px;  
  736.     z-index: 0;  
  737.     background: #181818;  
  738.     -webkit-border-radius: 150px 40px 150px 40px;  
  739.     -moz-border-radius: 150px 40px 150px 40px;  
  740.     transform: rotate(2deg);  
  741.     -webkit-transform: rotate(2deg);  
  742.     -moz-transform: rotate(2deg);  
  743.     -o-transform: rotate(2deg);  
  744. }  
  745. #bigBigWolf .nose .inner {  
  746.     right: 18px;  
  747.     top: 13px;  
  748.     width: 24px;  
  749.     height: 24px;  
  750.     z-index: 10;  
  751.     background: #4F4F4F;  
  752.     -webkit-border-radius: 150px 50px 150px 50px;  
  753.     -moz-border-radius: 150px 50px 150px 50px;  
  754.     transform: rotate(0deg);  
  755.     -webkit-transform: rotate(0deg);  
  756.     -moz-transform: rotate(0deg);  
  757.     -o-transform: rotate(0deg);  
  758. }  
  759. #bigBigWolf .nose .light {  
  760.     right: 16px;  
  761.     top: 3px;  
  762.     width: 20px;  
  763.     height: 20px;  
  764.     z-index: 20;  
  765.     background: #FFF;  
  766.     -webkit-border-radius: 150px 70px 150px 70px;  
  767.     -moz-border-radius: 150px 70px 150px 70px;  
  768.     transform: rotate(3deg);  
  769.     -webkit-transform: rotate(3deg);  
  770.     -moz-transform: rotate(3deg);  
  771.     -o-transform: rotate(3deg);  
  772. }  
  773. #bigBigWolf .mouth {  
  774.     right: 62px;  
  775.     bottom: 108px;  
  776.     width: 290px;  
  777.     height: 60px;  
  778.     border: 3px solid #181818;  
  779.     background: #FFF;  
  780.     z-index: 50;  
  781.     -webkit-border-top-left-radius: 700px 0;  
  782.     -webkit-border-top-right-radius: 700px 0;  
  783.     -webkit-border-bottom-left-radius: 2800px 1200px;  
  784.     -webkit-border-bottom-right-radius: 2800px 1200px;  
  785.     -moz-border-radius-topleft: 700px 0;  
  786.     -moz-border-radius-topright: 700px 0;  
  787.     -moz-border-radius-bottomleft: 2800px 1200px;  
  788.     -moz-border-radius-bottomright: 2800px 1200px;  
  789.     transform: rotate(341deg);  
  790.     -webkit-transform: rotate(341deg);  
  791.     -moz-transform: rotate(341deg);  
  792.     -o-transform: rotate(341deg);  
  793. }  
  794. #bigBigWolf .mouth .inner {  
  795.     right: -3px;  
  796.     bottom: 41px;  
  797.     width: 289px;  
  798.     height: 20px;  
  799.     border: 3px solid #181818;  
  800.     border-top: 0;  
  801.     background: #666B6F;  
  802.     z-index: 0;  
  803.     -webkit-border-top-left-radius: 700px 0;  
  804.     -webkit-border-top-right-radius: 700px 0;  
  805.     -webkit-border-bottom-left-radius: 7800px 1500px;  
  806.     -webkit-border-bottom-right-radius: 7800px 1500px;  
  807.     -moz-border-radius-topleft: 700px 0;  
  808.     -moz-border-radius-topright: 700px 0;  
  809.     -moz-border-radius-bottomleft: 7800px 1500px;  
  810.     -moz-border-radius-bottomright: 7800px 1500px;  
  811. }  
  812. #bigBigWolf .tooth1, #bigBigWolf .tooth2, #bigBigWolf .tooth3, #bigBigWolf .tooth4, #bigBigWolf .tooth5, #bigBigWolf .tooth6, #bigBigWolf .tooth7, #bigBigWolf .tooth8, #bigBigWolf .tooth9, #bigBigWolf .tooth10, #bigBigWolf .tooth11, #bigBigWolf .tooth12, #bigBigWolf .tooth13, #bigBigWolf .tooth14, #bigBigWolf .tooth15, #bigBigWolf .tooth16, #bigBigWolf .tooth17, #bigBigWolf .tooth18, #bigBigWolf .tooth19, #bigBigWolf .tooth20, #bigBigWolf .tooth121, #bigBigWolf .tooth122, #bigBigWolf .tooth123 {  
  813.     left: -1px;  
  814.     top: 18px;  
  815.     width: 20px;  
  816.     height: 2px;  
  817.     font-size: 0;  
  818.     background: #181818;  
  819.     z-index: 60px;  
  820.     transform: rotate(26deg);  
  821.     -webkit-transform: rotate(26deg);  
  822.     -moz-transform: rotate(26deg);  
  823.     -o-transform: rotate(26deg);  
  824. }  
  825. #bigBigWolf .tooth2 {  
  826.     left: 13px;  
  827.     top: 12px;  
  828.     width: 22px;  
  829.     transform: rotate(125deg);  
  830.     -webkit-transform: rotate(125deg);  
  831.     -moz-transform: rotate(122deg);  
  832.     -o-transform: rotate(125deg);  
  833. }  
  834. #bigBigWolf .tooth3 {  
  835.     left: 18px;  
  836.     top: 17px;  
  837.     width: 30px;  
  838.     transform: rotate(76deg);  
  839.     -webkit-transform: rotate(76deg);  
  840.     -moz-transform: rotate(76deg);  
  841.     -o-transform: rotate(76deg);  
  842. }  
  843. #bigBigWolf .tooth4 {  
  844.     left: 36px;  
  845.     top: 26px;  
  846.     width: 9px;  
  847.     transform: rotate(340deg);  
  848.     -webkit-transform: rotate(340deg);  
  849.     -moz-transform: rotate(340deg);  
  850.     -o-transform: rotate(340deg);  
  851. }  
  852. #bigBigWolf .tooth5 {  
  853.     left: 40px;  
  854.     top: 30px;  
  855.     width: 12px;  
  856.     transform: rotate(70deg);  
  857.     -webkit-transform: rotate(70deg);  
  858.     -moz-transform: rotate(70deg);  
  859.     -o-transform: rotate(70deg);  
  860. }  
  861. #bigBigWolf .tooth6 {  
  862.     left: 46px;  
  863.     top: 35px;  
  864.     width: 14px;  
  865.     transform: rotate(12deg);  
  866.     -webkit-transform: rotate(12deg);  
  867.     -moz-transform: rotate(12deg);  
  868.     -o-transform: rotate(12deg);  
  869. }  
  870. #bigBigWolf .tooth7 {  
  871.     left: 58px;  
  872.     top: 37px;  
  873.     width: 24px;  
  874.     transform: rotate(12deg);  
  875.     -webkit-transform: rotate(12deg);  
  876.     -moz-transform: rotate(12deg);  
  877.     -o-transform: rotate(12deg);  
  878. }  
  879. #bigBigWolf .tooth8, #bigBigWolf .tooth10 {  
  880.     left: 21px;  
  881.     top: 16px;  
  882.     width: 20px;  
  883.     height: 1px;  
  884.     background: #FFF;  
  885.     transform: rotate(76deg);  
  886.     -webkit-transform: rotate(76deg);  
  887.     -moz-transform: rotate(76deg);  
  888.     -o-transform: rotate(76deg);  
  889. }  
  890. #bigBigWolf .tooth9, #bigBigWolf .tooth11, #bigBigWolf .tooth12 {  
  891.     left: 14px;  
  892.     top: 15px;  
  893.     width: 20px;  
  894.     height: 1px;  
  895.     background: #FFF;  
  896.     transform: rotate(122deg);  
  897.     -webkit-transform: rotate(122deg);  
  898.     -moz-transform: rotate(122deg);  
  899.     -o-transform: rotate(122deg);  
  900. }  
  901. #bigBigWolf .tooth10 {  
  902.     left: 21px;  
  903.     top: 18px;  
  904.     height: 2px;  
  905. }  
  906. #bigBigWolf .tooth11 {  
  907.     left: 14px;  
  908.     top: 20px;  
  909.     height: 3px;  
  910. }  
  911. #bigBigWolf .tooth12 {  
  912.     left: 13px;  
  913.     top: 18px;  
  914.     height: 2px;  
  915. }  
  916. #bigBigWolf .tooth13 {  
  917.     left: 270px;  
  918.     top: 17px;  
  919.     width: 18px;  
  920.     transform: rotate(335deg);  
  921.     -webkit-transform: rotate(335deg);  
  922.     -moz-transform: rotate(335deg);  
  923.     -o-transform: rotate(335deg);  
  924. }  
  925. #bigBigWolf .tooth14 {  
  926.     left: 254px;  
  927.     top: 11px;  
  928.     width: 22px;  
  929.     transform: rotate(55deg);  
  930.     -webkit-transform: rotate(55deg);  
  931.     -moz-transform: rotate(55deg);  
  932.     -o-transform: rotate(55deg);  
  933. }  
  934. #bigBigWolf .tooth15 {  
  935.     left: 242px;  
  936.     top: 16px;  
  937.     width: 29px;  
  938.     transform: rotate(100deg);  
  939.     -webkit-transform: rotate(100deg);  
  940.     -moz-transform: rotate(100deg);  
  941.     -o-transform: rotate(100deg);  
  942. }  
  943. #bigBigWolf .tooth16 {  
  944.     left: 243px;  
  945.     top: 25px;  
  946.     width: 13px;  
  947.     transform: rotate(20deg);  
  948.     -webkit-transform: rotate(20deg);  
  949.     -moz-transform: rotate(20deg);  
  950.     -o-transform: rotate(20deg);  
  951. }  
  952. #bigBigWolf .tooth17 {  
  953.     left: 237px;  
  954.     top: 29px;  
  955.     width: 11px;  
  956.     transform: rotate(100deg);  
  957.     -webkit-transform: rotate(100deg);  
  958.     -moz-transform: rotate(100deg);  
  959.     -o-transform: rotate(100deg);  
  960. }  
  961. #bigBigWolf .tooth18 {  
  962.     left: 219px;  
  963.     top: 36px;  
  964.     width: 24px;  
  965.     transform: rotate(165deg);  
  966.     -webkit-transform: rotate(165deg);  
  967.     -moz-transform: rotate(165deg);  
  968.     -o-transform: rotate(165deg);  
  969. }  
  970. #bigBigWolf .tooth19, #bigBigWolf .tooth21, #bigBigWolf .tooth23 {  
  971.     left: 255px;  
  972.     top: 15px;  
  973.     width: 22px;  
  974.     height: 1px;  
  975.     background: #FFF;  
  976.     transform: rotate(55deg);  
  977.     -webkit-transform: rotate(55deg);  
  978.     -moz-transform: rotate(55deg);  
  979.     -o-transform: rotate(55deg);  
  980. }  
  981. #bigBigWolf .tooth20, #bigBigWolf .tooth22 {  
  982.     left: 247px;  
  983.     top: 17px;  
  984.     width: 22px;  
  985.     height: 1px;  
  986.     background: #FFF;  
  987.     transform: rotate(100deg);  
  988.     -webkit-transform: rotate(100deg);  
  989.     -moz-transform: rotate(100deg);  
  990.     -o-transform: rotate(100deg);  
  991. }  
  992. #bigBigWolf .tooth21 {  
  993.     left: 255px;  
  994.     top: 16px;  
  995.     height: 2px;  
  996. }  
  997. #bigBigWolf .tooth22 {  
  998.     left: 248px;  
  999.     top: 19px;  
  1000.     height: 4px;  
  1001. }  
  1002. #bigBigWolf .tooth23 {  
  1003.     left: 255px;  
  1004.     top: 19px;  
  1005.     height: 2px;  
  1006. }  
  1007. #bigBigWolf .beard {  
  1008.     left: 190px;  
  1009.     bottom: 50px;  
  1010.     width: 370px;  
  1011.     height: 200px;  
  1012.     z-index: 80;  
  1013. }  
  1014. #bigBigWolf .beard1, #bigBigWolf .beard2, #bigBigWolf .beard3, #bigBigWolf .beard4, #bigBigWolf .beard5, #bigBigWolf .beard6, #bigBigWolf .beard7, #bigBigWolf .beard8, #bigBigWolf .beard9, #bigBigWolf .beard10, #bigBigWolf .beard11, #bigBigWolf .beard12 {  
  1015.     right: -1px;  
  1016.     top: 32px;  
  1017.     width: 40px;  
  1018.     height: 2px;  
  1019.     font-size: 0;  
  1020.     background: #181818;  
  1021.     z-index: 0;  
  1022.     transform: rotate(3deg);  
  1023.     -webkit-transform: rotate(3deg);  
  1024.     -moz-transform: rotate(3deg);  
  1025.     -o-transform: rotate(3deg);  
  1026. }  
  1027. #bigBigWolf .beard2 {  
  1028.     right: 23px;  
  1029.     top: 68px;  
  1030.     width: 24px;  
  1031.     transform: rotate(355deg);  
  1032.     -webkit-transform: rotate(355deg);  
  1033.     -moz-transform: rotate(355deg);  
  1034.     -o-transform: rotate(355deg);  
  1035. }  
  1036. #bigBigWolf .beard3 {  
  1037.     right: 34px;  
  1038.     top: 90px;  
  1039.     width: 22px;  
  1040.     transform: rotate(30deg);  
  1041.     -webkit-transform: rotate(30deg);  
  1042.     -moz-transform: rotate(30deg);  
  1043.     -o-transform: rotate(30deg);  
  1044. }  
  1045. #bigBigWolf .beard4 {  
  1046.     right: 54px;  
  1047.     top: 120px;  
  1048.     width: 28px;  
  1049.     transform: rotate(50deg);  
  1050.     -webkit-transform: rotate(50deg);  
  1051.     -moz-transform: rotate(50deg);  
  1052.     -o-transform: rotate(50deg);  
  1053. }  
  1054. #bigBigWolf .beard5 {  
  1055.     right: 89px;  
  1056.     top: 132px;  
  1057.     width: 22px;  
  1058.     transform: rotate(60deg);  
  1059.     -webkit-transform: rotate(60deg);  
  1060.     -moz-transform: rotate(60deg);  
  1061.     -o-transform: rotate(60deg);  
  1062. }  
  1063. #bigBigWolf .beard6 {  
  1064.     right: 115px;  
  1065.     top: 148px;  
  1066.     width: 16px;  
  1067.     transform: rotate(70deg);  
  1068.     -webkit-transform: rotate(70deg);  
  1069.     -moz-transform: rotate(70deg);  
  1070.     -o-transform: rotate(70deg);  
  1071. }  
  1072. #bigBigWolf .beard7 {  
  1073.     right: 145px;  
  1074.     top: 162px;  
  1075.     width: 24px;  
  1076.     transform: rotate(90deg);  
  1077.     -webkit-transform: rotate(90deg);  
  1078.     -moz-transform: rotate(90deg);  
  1079.     -o-transform: rotate(90deg);  
  1080. }  
  1081. #bigBigWolf .beard8 {  
  1082.     right: 175px;  
  1083.     top: 166px;  
  1084.     width: 16px;  
  1085.     transform: rotate(110deg);  
  1086.     -webkit-transform: rotate(110deg);  
  1087.     -moz-transform: rotate(110deg);  
  1088.     -o-transform: rotate(110deg);  
  1089. }  
  1090. #bigBigWolf .beard9 {  
  1091.     right: 210px;  
  1092.     top: 173px;  
  1093.     width: 22px;  
  1094.     transform: rotate(60deg);  
  1095.     -webkit-transform: rotate(60deg);  
  1096.     -moz-transform: rotate(60deg);  
  1097.     -o-transform: rotate(60deg);  
  1098. }  
  1099. #bigBigWolf .beard10 {  
  1100.     right: 245px;  
  1101.     top: 173px;  
  1102.     width: 14px;  
  1103.     transform: rotate(130deg);  
  1104.     -webkit-transform: rotate(130deg);  
  1105.     -moz-transform: rotate(130deg);  
  1106.     -o-transform: rotate(130deg);  
  1107. }  
  1108. #bigBigWolf .beard11 {  
  1109.     right: 275px;  
  1110.     top: 168px;  
  1111.     width: 20px;  
  1112.     transform: rotate(120deg);  
  1113.     -webkit-transform: rotate(120deg);  
  1114.     -moz-transform: rotate(120deg);  
  1115.     -o-transform: rotate(120deg);  
  1116. }  
  1117. #bigBigWolf .beard12 {  
  1118.     right: 300px;  
  1119.     top: 156px;  
  1120.     width: 16px;  
  1121.     transform: rotate(140deg);  
  1122.     -webkit-transform: rotate(140deg);  
  1123.     -moz-transform: rotate(140deg);  
  1124.     -o-transform: rotate(140deg);  
  1125. }  
  1126. #bigBigWolf .scar, #bigBigWolf .scar1, #bigBigWolf .scar2, #bigBigWolf .scar3, #bigBigWolf .scar4, #bigBigWolf .scar5 {  
  1127.     left: 142px;  
  1128.     bottom: 154px;  
  1129.     width: 120px;  
  1130.     height: 2px;  
  1131.     font-size: 0;  
  1132.     background: #181818;  
  1133.     z-index: 60px;  
  1134.     transform: rotate(43deg);  
  1135.     -webkit-transform: rotate(43deg);  
  1136.     -moz-transform: rotate(43deg);  
  1137.     -o-transform: rotate(43deg);  
  1138. }  
  1139. #bigBigWolf .scar1 {  
  1140.     left: -2px;  
  1141.     top: -5px;  
  1142.     width: 25px;  
  1143.     transform: rotate(90deg);  
  1144.     -webkit-transform: rotate(90deg);  
  1145.     -moz-transform: rotate(90deg);  
  1146.     -o-transform: rotate(90deg);  
  1147. }  
  1148. #bigBigWolf .scar2 {  
  1149.     left: 20px;  
  1150.     top: 2px;  
  1151.     width: 29px;  
  1152.     transform: rotate(80deg);  
  1153.     -webkit-transform: rotate(80deg);  
  1154.     -moz-transform: rotate(80deg);  
  1155.     -o-transform: rotate(80deg);  
  1156. }  
  1157. #bigBigWolf .scar3 {  
  1158.     left: 50px;  
  1159.     top: -2px;  
  1160.     width: 29px;  
  1161.     transform: rotate(90deg);  
  1162.     -webkit-transform: rotate(90deg);  
  1163.     -moz-transform: rotate(90deg);  
  1164.     -o-transform: rotate(90deg);  
  1165. }  
  1166. #bigBigWolf .scar4 {  
  1167.     left: 74px;  
  1168.     top: -4px;  
  1169.     width: 22px;  
  1170.     transform: rotate(92deg);  
  1171.     -webkit-transform: rotate(92deg);  
  1172.     -moz-transform: rotate(92deg);  
  1173.     -o-transform: rotate(92deg);  
  1174. }  
  1175. #bigBigWolf .scar5 {  
  1176.     left: 95px;  
  1177.     top: -2px;  
  1178.     width: 25px;  
  1179.     transform: rotate(90deg);  
  1180.     -webkit-transform: rotate(90deg);  
  1181.     -moz-transform: rotate(90deg);  
  1182.     -o-transform: rotate(90deg);  
  1183. }  
  1184.   
  1185.   
  1186.   
  1187.   
  
  •     
  •     
    •   
  •     
    •   
  •     
    •   
  •