|
|
使用css3技术绘制的灰太狼动画,绝对精彩,不过请不要使用IE浏览器查看,否则很失望,很多浏览器可以很好的支持CSS3,像火狐、Safari、Chrome等等,都可以查看本效果哦。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>CSS3我是灰太狼</title>
- <style type="text/css">
- * {
- margin: 0;
- padding: 0;
- }
- #bigBigWolf {
- position: absolute;
- left: 50%;
- top: 50%;
- margin-left: -300px;
- margin-top: -300px;
- width: 600px;
- height: 600px;
- }
- #bigBigWolf div {
- position: absolute;
- }
- #bigBigWolf #url a {
- position: absolute;
- left: 0;
- top: 0;
- width: 600px;
- height: 600px;
- z-index: 100;
- }
- #bigBigWolf .face {
- left: 127px;
- bottom: 67px;
- width: 380px;
- height: 380px;
- border: 3px solid #181818;
- background: #666B6F;
- z-index: 0;
- -webkit-border-radius: 230px 180px 300px 220px;
- -moz-border-radius: 230px 180px 300px 220px;
- transform: rotate(60deg);
- -webkit-transform: rotate(60deg);
- -moz-transform: rotate(60deg);
- -o-transform: rotate(60deg);
- }
- #bigBigWolf .face .left {
- left: 30px;
- top: 317px;
- width: 180px;
- height: 106px;
- border: 3px solid #181818;
- border-top: 0;
- background: #666B6F;
- z-index: 10;
- -webkit-border-bottom-left-radius: 2800px 1200px;
- -moz-border-radius-bottomleft: 2800px 1200px;
- transform: rotate(30deg);
- -webkit-transform: rotate(30deg);
- -moz-transform: rotate(30deg);
- -o-transform: rotate(30deg);
- }
- #bigBigWolf .face .right {
- left: 105px;
- top: -45px;
- width: 160px;
- height: 90px;
- border: 3px solid #181818;
- border-bottom: 0;
- background: #666B6F;
- z-index: 10;
- -webkit-border-top-left-radius: 2800px 2000px;
- -moz-border-radius-topleft: 2800px 2000px;
- transform: rotate(335deg);
- -webkit-transform: rotate(335deg);
- -moz-transform: rotate(335deg);
- -o-transform: rotate(335deg);
- }
- #bigBigWolf .face .cover1 {
- left: 160px;
- top: 415px;
- width: 28px;
- height: 40px;
- border: 3px solid #181818;
- border-bottom: 0;
- background: #FFF;
- z-index: 20;
- -webkit-border-top-left-radius: 600px 1200px;
- -webkit-border-top-right-radius: 400px 700px;
- -webkit-border-bottom-left-radius: 400px 150px;
- -webkit-border-bottom-right-radius: 400px 150px;
- -moz-border-radius-topleft: 600px 1200px;
- -moz-border-radius-topright: 400px 700px;
- -moz-border-radius-bottomleft: 400px 150px;
- -moz-border-radius-bottomright: 400px 150px;
- }
- #bigBigWolf .face .cover2 {
- left: 163px;
- top: 433px;
- width: 40px;
- height: 40px;
- background: #FFF;
- z-index: 30;
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- }
- #bigBigWolf .face .cover3 {
- left: 53px;
- top: 285px;
- width: 74px;
- height: 74px;
- background: #666B6F;
- z-index: 40;
- -webkit-border-radius: 37px;
- -moz-border-radius: 37px;
- }
- #bigBigWolf .face .cover4 {
- left: 227px;
- top: -80px;
- width: 25px;
- height: 40px;
- border: 3px solid #181818;
- border-bottom: 0;
- background: #FFF;
- z-index: 20;
- -webkit-border-top-left-radius: 600px 1200px;
- -webkit-border-top-right-radius: 400px 700px;
- -webkit-border-bottom-left-radius: 400px 150px;
- -webkit-border-bottom-right-radius: 400px 150px;
- -moz-border-radius-topleft: 600px 1200px;
- -moz-border-radius-topright: 400px 700px;
- -moz-border-radius-bottomleft: 400px 150px;
- -moz-border-radius-bottomright: 400px 150px;
- transform: rotate(170deg);
- -webkit-transform: rotate(170deg);
- -moz-transform: rotate(170deg);
- -o-transform: rotate(170deg);
- }
- #bigBigWolf .face .cover5 {
- left: 214px;
- top: -90px;
- width: 60px;
- height: 30px;
- background: #FFF;
- z-index: 40;
- transform: rotate(28deg);
- -webkit-transform: rotate(28deg);
- -moz-transform: rotate(28deg);
- -o-transform: rotate(28deg);
- }
- #bigBigWolf .ear {
- z-index: 0;
- }
- #bigBigWolf .ear .left {
- left: 48px;
- top: 167px;
- width: 180px;
- height: 120px;
- border: 3px solid #181818;
- border-right: 0;
- background: #666B6F;
- z-index: 0;
- -webkit-border-top-left-radius: 295px 200px;
- -moz-border-radius-topleft: 295px 200px;
- transform: rotate(51deg);
- -webkit-transform: rotate(51deg);
- -moz-transform: rotate(51deg);
- -o-transform: rotate(51deg);
- }
- #bigBigWolf .ear .left .inner {
- left: -3px;
- top: 88px;
- width: 180px;
- height: 30px;
- border: 3px solid #181818;
- border-right: 0;
- background: #96979C;
- z-index: 10;
- -webkit-border-top-left-radius: 1000px 200px;
- -moz-border-radius-topleft: 1000px 200px;
- }
- #bigBigWolf .ear .left .cover1 {
- left: 83px;
- top: 30px;
- width: 132px;
- height: 65px;
- background: #666B6F;
- z-index: 20;
- -webkit-border-bottom-right-radius: 1200px 200px;
- -moz-border-radius-bottomright: 1200px 200px;
- transform: rotate(90deg);
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -o-transform: rotate(90deg);
- }
- #bigBigWolf .ear .left .cover2 {
- left: 111px;
- top: 91px;
- width: 12px;
- height: 8px;
- border: 3px solid #181818;
- border-right: 0;
- background: #666B6F;
- z-index: 30;
- -webkit-border-top-left-radius: 30px 20px;
- -moz-border-radius-topleft: 30px 20px;
- transform: rotate(345deg);
- -webkit-transform: rotate(345deg);
- -moz-transform: rotate(345deg);
- -o-transform: rotate(345deg);
- }
- #bigBigWolf .ear .left .cover3 {
- left: 114px;
- top: 104px;
- width: 12px;
- height: 6px;
- border: 3px solid #181818;
- border-right: 0;
- background: #666B6F;
- z-index: 30;
- -webkit-border-top-left-radius: 30px 20px;
- -moz-border-radius-topleft: 30px 20px;
- transform: rotate(325deg);
- -webkit-transform: rotate(325deg);
- -moz-transform: rotate(325deg);
- -o-transform: rotate(325deg);
- }
- #bigBigWolf .ear .left .cover4 {
- left: 123px;
- top: 113px;
- width: 11px;
- height: 4px;
- border: 3px solid #181818;
- border-right: 0;
- border-top: 0;
- background: #666B6F;
- z-index: 30;
- -webkit-border-bottom-left-radius: 30px 20px;
- -moz-border-radius-bottomleft: 30px 20px;
- transform: rotate(62deg);
- -webkit-transform: rotate(62deg);
- -moz-transform: rotate(62deg);
- -o-transform: rotate(62deg);
- }
- #bigBigWolf .ear .right {
- left: 340px;
- top: 78px;
- width: 140px;
- height: 100px;
- border: 3px solid #181818;
- border-left: 0;
- background: #666B6F;
- z-index: 10;
- -webkit-border-top-right-radius: 245px 190px;
- -moz-border-radius-topright: 245px 190px;
- transform: rotate(275deg);
- -webkit-transform: rotate(275deg);
- -moz-transform: rotate(275deg);
- -o-transform: rotate(275deg);
- }
- #bigBigWolf .ear .right .inner {
- left: -1px;
- top: 68px;
- width: 140px;
- height: 30px;
- border: 3px solid #181818;
- border-left: 0;
- background: #96979C;
- z-index: 10;
- -webkit-border-top-right-radius: 1200px 300px;
- -moz-border-radius-topright: 1200px 300px;
- }
- #bigBigWolf .ear .right .cover1 {
- left: -49px;
- top: 25px;
- width: 120px;
- height: 40px;
- border: 3px solid #181818;
- border-bottom: 0;
- background: #666B6F;
- z-index: 20;
- -webkit-border-top-right-radius: 1200px 300px;
- -moz-border-radius-topright: 1200px 300px;
- transform: rotate(101deg);
- -webkit-transform: rotate(101deg);
- -moz-transform: rotate(101deg);
- -o-transform: rotate(101deg);
- }
- #bigBigWolf .ear .right .cover2 {
- left: -135px;
- top: 117px;
- width: 145px;
- height: 40px;
- border: 3px solid #181818;
- border-bottom: 0;
- background: #666B6F;
- z-index: 30;
- -webkit-border-top-right-radius: 1100px 300px;
- -moz-border-radius-topright: 1100px 300px;
- transform: rotate(133deg);
- -webkit-transform: rotate(133deg);
- -moz-transform: rotate(133deg);
- -o-transform: rotate(133deg);
- }
- #bigBigWolf .ear .right .cover3 {
- left: -85px;
- top: 15px;
- width: 80px;
- height: 80px;
- background: #666B6F;
- z-index: 40;
- }
- #bigBigWolf .ear .right .cover4 {
- left: -142px;
- top: 144px;
- width: 40px;
- height: 40px;
- background: #666B6F;
- z-index: 50;
- -webkit-border-radius: 20px;
- -moz-border-radius: 20px;
- }
- #bigBigWolf .ear .right .cover5 {
- left: 32px;
- top: 87px;
- width: 30px;
- height: 30px;
- border: 3px solid #181818;
- border-bottom: 0;
- border-left: 0;
- background: #FFF;
- z-index: 50;
- -webkit-border-radius: 30px;
- -moz-border-radius: 30px;
- transform: rotate(313deg);
- -webkit-transform: rotate(313deg);
- -moz-transform: rotate(313deg);
- -o-transform: rotate(313deg);
- }
- #bigBigWolf .hat {
- left: 137px;
- top: 115px;
- width: 238px;
- height: 100px;
- border: 3px solid #181818;
- background: #E09E86;
- z-index: 40;
- -webkit-border-top-left-radius: 2000px 1000px;
- -webkit-border-top-right-radius: 700px 700px;
- -webkit-border-bottom-left-radius: 300px 200px;
- -webkit-border-bottom-right-radius: 450px 450px;
- -moz-border-radius-topleft: 2000px 1000px;
- -moz-border-radius-topright: 700px 700px;
- -moz-border-radius-bottomleft: 300px 200px;
- -moz-border-radius-bottomright: 450px 450px;
- transform: rotate(338deg);
- -webkit-transform: rotate(338deg);
- -moz-transform: rotate(338deg);
- -o-transform: rotate(338deg);
- }
- #bigBigWolf .hat .inner {
- right: -1px;
- top: 1px;
- width: 238px;
- height: 80px;
- border: 3px solid #181818;
- background: #CF6A36;
- z-index: 0;
- -webkit-border-top-left-radius: 2400px 1200px;
- -webkit-border-top-right-radius: 800px 800px;
- -webkit-border-bottom-left-radius: 400px 200px;
- -webkit-border-bottom-right-radius: 450px 450px;
- -moz-border-radius-topleft: 2400px 1200px;
- -moz-border-radius-topright: 800px 800px;
- -moz-border-radius-bottomleft: 400px 200px;
- -moz-border-radius-bottomright: 450px 450px;
- transform: rotate(357deg);
- -webkit-transform: rotate(357deg);
- -moz-transform: rotate(357deg);
- -o-transform: rotate(357deg);
- }
- #bigBigWolf .hat .patch {
- right: -3px;
- top: -7px;
- width: 110px;
- height: 50px;
- border: 3px solid #181818;
- background: #EFC978;
- z-index: 10;
- -webkit-border-top-left-radius: 500px 300px;
- -webkit-border-top-right-radius: 300px 200px;
- -webkit-border-bottom-left-radius: 100px 100px;
- -webkit-border-bottom-right-radius: 100px 100px;
- -moz-border-radius-topleft: 500px 300px;
- -moz-border-radius-topright: 300px 200px;
- -moz-border-radius-bottomleft: 100px 100px;
- -moz-border-radius-bottomright: 100px 100px;
- transform: rotate(20deg);
- -webkit-transform: rotate(20deg);
- -moz-transform: rotate(20deg);
- -o-transform: rotate(20deg);
- }
- #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 {
- left: -7px;
- top: 30px;
- width: 18px;
- height: 2px;
- font-size: 0;
- background: #181818;
- z-index: 20px;
- transform: rotate(350deg);
- -webkit-transform: rotate(350deg);
- -moz-transform: rotate(350deg);
- -o-transform: rotate(350deg);
- }
- #bigBigWolf .hat .patch .line2 {
- left: -13px;
- top: 42px;
- width: 20px;
- transform: rotate(340deg);
- -webkit-transform: rotate(340deg);
- -moz-transform: rotate(340deg);
- -o-transform: rotate(340deg);
- }
- #bigBigWolf .hat .patch .line3 {
- left: 5px;
- top: 50px;
- width: 17px;
- transform: rotate(300deg);
- -webkit-transform: rotate(300deg);
- -moz-transform: rotate(300deg);
- -o-transform: rotate(300deg);
- }
- #bigBigWolf .hat .patch .line4 {
- left: 20px;
- top: 53px;
- width: 17px;
- transform: rotate(270deg);
- -webkit-transform: rotate(270deg);
- -moz-transform: rotate(270deg);
- -o-transform: rotate(270deg);
- }
- #bigBigWolf .hat .patch .line5 {
- left: 35px;
- top: 50px;
- width: 14px;
- transform: rotate(290deg);
- -webkit-transform: rotate(290deg);
- -moz-transform: rotate(290deg);
- -o-transform: rotate(290deg);
- }
- #bigBigWolf .hat .patch .line6 {
- left: 50px;
- top: 52px;
- width: 19px;
- transform: rotate(275deg);
- -webkit-transform: rotate(275deg);
- -moz-transform: rotate(275deg);
- -o-transform: rotate(275deg);
- }
- #bigBigWolf .hat .patch .line7 {
- left: 70px;
- top: 50px;
- width: 15px;
- transform: rotate(290deg);
- -webkit-transform: rotate(260deg);
- -moz-transform: rotate(260deg);
- -o-transform: rotate(260deg);
- }
- #bigBigWolf .hat .patch .line8 {
- left: 85px;
- top: 51px;
- width: 19px;
- transform: rotate(250deg);
- -webkit-transform: rotate(250deg);
- -moz-transform: rotate(250deg);
- -o-transform: rotate(250deg);
- }
- #bigBigWolf .hat .patch .line9 {
- left: 102px;
- top: 45px;
- width: 13px;
- transform: rotate(230deg);
- -webkit-transform: rotate(230deg);
- -moz-transform: rotate(230deg);
- -o-transform: rotate(230deg);
- }
- #bigBigWolf .hat .patch .line10 {
- left: 106px;
- top: 34px;
- width: 12px;
- transform: rotate(220deg);
- -webkit-transform: rotate(220deg);
- -moz-transform: rotate(220deg);
- -o-transform: rotate(220deg);
- }
- #bigBigWolf .eye {
- left: 213px;
- top: 221px;
- width: 287px;
- height: 185px;
- z-index: 20;
- }
- #bigBigWolf .eye .left, #bigBigWolf .eye .right {
- width: 121px;
- height: 121px;
- border: 3px solid #181818;
- background: #DBDBDB;
- z-index: 0;
- -webkit-border-radius: 61px;
- -moz-border-radius: 61px;
- }
- #bigBigWolf .eye .left {
- left: 0;
- bottom: 0;
- }
- #bigBigWolf .eye .right {
- right: 0;
- top: 0;
- }
- #bigBigWolf .eye .inner {
- left: 2px;
- top: 2px;
- width: 114px;
- height: 114px;
- background: #FFF;
- z-index: 10;
- -webkit-border-radius: 57px;
- -moz-border-radius: 57px;
- }
- #bigBigWolf .eye .pupil {
- left: 8px;
- top: 26px;
- width: 54px;
- height: 54px;
- border: 2px solid #181818;
- z-index: 20;
- -webkit-border-radius: 27px;
- -moz-border-radius: 27px;
- background: #404972;
- background: -webkit-gradient(linear, 43% 0%, 39% 100%, from(#181818), to(#455289), color-stop(1.0, #455289));
- background: -moz-linear-gradient(50% 25% 260deg, #181818, #455289, #455289 100%);
- -webkit-animation: 'pupil' 2s linear;
- -webkit-animation-iteration-count: infinite;
- }
- @-webkit-keyframes pupil {
- 0% {
- left: 8px;
- top: 26px;
- }
- 25% {
- left: 29px;
- top: 33px;
- }
- 50% {
- left: 50px;
- top: 40px;
- }
- 75% {
- left: 29px;
- top: 33px;
- }
- 100% {
- left: 8px;
- top: 26px;
- }
- }
- #bigBigWolf .eye .pupil .inner {
- left: 9px;
- top: 9px;
- width: 36px;
- height: 36px;
- background: #1A1A1A;
- z-index: 30;
- -webkit-border-radius: 18px;
- -moz-border-radius: 18px;
- }
- #bigBigWolf .eye .light1 {
- left: 21px;
- bottom: 3px;
- width: 16px;
- height: 16px;
- background: #FFF;
- z-index: 40;
- -webkit-border-radius: 15px 7px 10px 10px;
- -moz-border-radius: 20px 7px 20px 10px;
- transform: rotate(320deg);
- -webkit-transform: rotate(320deg);
- -moz-transform: rotate(320deg);
- -o-transform: rotate(320deg);
- }
- #bigBigWolf .eye .light2 {
- left: 7px;
- bottom: 11px;
- width: 14px;
- height: 6px;
- background: #FFF;
- z-index: 40;
- -webkit-border-top-left-radius: 500px 300px;
- -webkit-border-top-right-radius: 300px 200px;
- -webkit-border-bottom-left-radius: 100px 100px;
- -webkit-border-bottom-right-radius: 100px 100px;
- -moz-border-radius-topleft: 20px 20px;
- -moz-border-radius-topright: 30px 20px;
- -moz-border-radius-bottomleft: 5px 5px;
- -moz-border-radius-bottomright: 5px 5px;
- transform: rotate(285deg);
- -webkit-transform: rotate(285deg);
- -moz-transform: rotate(285deg);
- -o-transform: rotate(285deg);
- }
- #bigBigWolf .eye .light3 {
- right: 2px;
- top: 4px;
- width: 30px;
- height: 13px;
- background: #FFF;
- z-index: 40;
- -webkit-border-top-left-radius: 40px 40px;
- -webkit-border-top-right-radius: 100px 50px;
- -webkit-border-bottom-left-radius: 15px 15px;
- -webkit-border-bottom-right-radius: 15px 15px;
- -moz-border-radius-topleft: 40px 40px;
- -moz-border-radius-topright: 100px 50px;
- -moz-border-radius-bottomleft: 15px 15px;
- -moz-border-radius-bottomright: 15px 15px;
- transform: rotate(20deg);
- -webkit-transform: rotate(20deg);
- -moz-transform: rotate(20deg);
- -o-transform: rotate(20deg);
- }
- #bigBigWolf .eyebrow {
- left: 187px;
- top: 173px;
- width: 280px;
- height: 130px;
- z-index: 70;
- }
- #bigBigWolf .eyebrow .left {
- left: 0;
- top: 48px;
- width: 110px;
- height: 40px;
- background: #181818;
- z-index: 0;
- -webkit-border-top-left-radius: 400px 200px;
- -webkit-border-top-right-radius: 400px 200px;
- -moz-border-radius-topleft: 400px 200px;
- -moz-border-radius-topright: 400px 200px;
- transform: rotate(330deg);
- -webkit-transform: rotate(330deg);
- -moz-transform: rotate(330deg);
- -o-transform: rotate(330deg);
- }
- #bigBigWolf .eyebrow .left .inner {
- left: 0;
- top: 20px;
- width: 120px;
- height: 30px;
- background: #666B6F;
- z-index: 0;
- -webkit-border-top-left-radius: 400px 200px;
- -webkit-border-top-right-radius: 400px 200px;
- -moz-border-radius-topleft: 400px 200px;
- -moz-border-radius-topright: 400px 200px;
- }
- #bigBigWolf .eyebrow .left .eyebrow1, #bigBigWolf .eyebrow .left .eyebrow2, #bigBigWolf .eyebrow .right .eyebrow1 {
- left: -22px;
- top: 36px;
- width: 22px;
- height: 2px;
- font-size: 0;
- background: #181818;
- z-index: 10px;
- transform: rotate(86deg);
- -webkit-transform: rotate(86deg);
- -moz-transform: rotate(86deg);
- -o-transform: rotate(86deg);
- }
- #bigBigWolf .eyebrow .left .eyebrow2 {
- left: -15px;
- top: 32px;
- width: 20px;
- }
- #bigBigWolf .eyebrow .right .eyebrow1 {
- left: 93px;
- top: 24px;
- width: 20px;
- }
- #bigBigWolf .eyebrow .right {
- right: 17px;
- top: -3px;
- width: 100px;
- height: 40px;
- background: #181818;
- z-index: 0;
- -webkit-border-top-left-radius: 400px 200px;
- -webkit-border-top-right-radius: 400px 200px;
- -moz-border-radius-topleft: 400px 200px;
- -moz-border-radius-topright: 400px 200px;
- transform: rotate(355deg);
- -webkit-transform: rotate(355deg);
- -moz-transform: rotate(355deg);
- -o-transform: rotate(355deg);
- }
- #bigBigWolf .eyebrow .right .inner {
- right: -7px;
- top: 20px;
- width: 120px;
- height: 30px;
- background: #666B6F;
- z-index: 0;
- -webkit-border-top-left-radius: 400px 200px;
- -webkit-border-top-right-radius: 400px 200px;
- -moz-border-radius-topleft: 400px 200px;
- -moz-border-radius-topright: 400px 200px;
- }
- #bigBigWolf .nose {
- right: 158px;
- bottom: 203px;
- width: 74px;
- height: 74px;
- z-index: 30;
- background: #4B4B4B;
- -webkit-border-radius: 160px 40px 160px 40px;
- -moz-border-radius: 160px 30px 160px 40px;
- transform: rotate(25deg);
- -webkit-transform: rotate(25deg);
- -moz-transform: rotate(25deg);
- -o-transform: rotate(25deg);
- }
- #bigBigWolf .nose .outer {
- right: 1px;
- top: -2px;
- width: 72px;
- height: 72px;
- z-index: 0;
- background: #181818;
- -webkit-border-radius: 150px 40px 150px 40px;
- -moz-border-radius: 150px 40px 150px 40px;
- transform: rotate(2deg);
- -webkit-transform: rotate(2deg);
- -moz-transform: rotate(2deg);
- -o-transform: rotate(2deg);
- }
- #bigBigWolf .nose .inner {
- right: 18px;
- top: 13px;
- width: 24px;
- height: 24px;
- z-index: 10;
- background: #4F4F4F;
- -webkit-border-radius: 150px 50px 150px 50px;
- -moz-border-radius: 150px 50px 150px 50px;
- transform: rotate(0deg);
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- }
- #bigBigWolf .nose .light {
- right: 16px;
- top: 3px;
- width: 20px;
- height: 20px;
- z-index: 20;
- background: #FFF;
- -webkit-border-radius: 150px 70px 150px 70px;
- -moz-border-radius: 150px 70px 150px 70px;
- transform: rotate(3deg);
- -webkit-transform: rotate(3deg);
- -moz-transform: rotate(3deg);
- -o-transform: rotate(3deg);
- }
- #bigBigWolf .mouth {
- right: 62px;
- bottom: 108px;
- width: 290px;
- height: 60px;
- border: 3px solid #181818;
- background: #FFF;
- z-index: 50;
- -webkit-border-top-left-radius: 700px 0;
- -webkit-border-top-right-radius: 700px 0;
- -webkit-border-bottom-left-radius: 2800px 1200px;
- -webkit-border-bottom-right-radius: 2800px 1200px;
- -moz-border-radius-topleft: 700px 0;
- -moz-border-radius-topright: 700px 0;
- -moz-border-radius-bottomleft: 2800px 1200px;
- -moz-border-radius-bottomright: 2800px 1200px;
- transform: rotate(341deg);
- -webkit-transform: rotate(341deg);
- -moz-transform: rotate(341deg);
- -o-transform: rotate(341deg);
- }
- #bigBigWolf .mouth .inner {
- right: -3px;
- bottom: 41px;
- width: 289px;
- height: 20px;
- border: 3px solid #181818;
- border-top: 0;
- background: #666B6F;
- z-index: 0;
- -webkit-border-top-left-radius: 700px 0;
- -webkit-border-top-right-radius: 700px 0;
- -webkit-border-bottom-left-radius: 7800px 1500px;
- -webkit-border-bottom-right-radius: 7800px 1500px;
- -moz-border-radius-topleft: 700px 0;
- -moz-border-radius-topright: 700px 0;
- -moz-border-radius-bottomleft: 7800px 1500px;
- -moz-border-radius-bottomright: 7800px 1500px;
- }
- #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 {
- left: -1px;
- top: 18px;
- width: 20px;
- height: 2px;
- font-size: 0;
- background: #181818;
- z-index: 60px;
- transform: rotate(26deg);
- -webkit-transform: rotate(26deg);
- -moz-transform: rotate(26deg);
- -o-transform: rotate(26deg);
- }
- #bigBigWolf .tooth2 {
- left: 13px;
- top: 12px;
- width: 22px;
- transform: rotate(125deg);
- -webkit-transform: rotate(125deg);
- -moz-transform: rotate(122deg);
- -o-transform: rotate(125deg);
- }
- #bigBigWolf .tooth3 {
- left: 18px;
- top: 17px;
- width: 30px;
- transform: rotate(76deg);
- -webkit-transform: rotate(76deg);
- -moz-transform: rotate(76deg);
- -o-transform: rotate(76deg);
- }
- #bigBigWolf .tooth4 {
- left: 36px;
- top: 26px;
- width: 9px;
- transform: rotate(340deg);
- -webkit-transform: rotate(340deg);
- -moz-transform: rotate(340deg);
- -o-transform: rotate(340deg);
- }
- #bigBigWolf .tooth5 {
- left: 40px;
- top: 30px;
- width: 12px;
- transform: rotate(70deg);
- -webkit-transform: rotate(70deg);
- -moz-transform: rotate(70deg);
- -o-transform: rotate(70deg);
- }
- #bigBigWolf .tooth6 {
- left: 46px;
- top: 35px;
- width: 14px;
- transform: rotate(12deg);
- -webkit-transform: rotate(12deg);
- -moz-transform: rotate(12deg);
- -o-transform: rotate(12deg);
- }
- #bigBigWolf .tooth7 {
- left: 58px;
- top: 37px;
- width: 24px;
- transform: rotate(12deg);
- -webkit-transform: rotate(12deg);
- -moz-transform: rotate(12deg);
- -o-transform: rotate(12deg);
- }
- #bigBigWolf .tooth8, #bigBigWolf .tooth10 {
- left: 21px;
- top: 16px;
- width: 20px;
- height: 1px;
- background: #FFF;
- transform: rotate(76deg);
- -webkit-transform: rotate(76deg);
- -moz-transform: rotate(76deg);
- -o-transform: rotate(76deg);
- }
- #bigBigWolf .tooth9, #bigBigWolf .tooth11, #bigBigWolf .tooth12 {
- left: 14px;
- top: 15px;
- width: 20px;
- height: 1px;
- background: #FFF;
- transform: rotate(122deg);
- -webkit-transform: rotate(122deg);
- -moz-transform: rotate(122deg);
- -o-transform: rotate(122deg);
- }
- #bigBigWolf .tooth10 {
- left: 21px;
- top: 18px;
- height: 2px;
- }
- #bigBigWolf .tooth11 {
- left: 14px;
- top: 20px;
- height: 3px;
- }
- #bigBigWolf .tooth12 {
- left: 13px;
- top: 18px;
- height: 2px;
- }
- #bigBigWolf .tooth13 {
- left: 270px;
- top: 17px;
- width: 18px;
- transform: rotate(335deg);
- -webkit-transform: rotate(335deg);
- -moz-transform: rotate(335deg);
- -o-transform: rotate(335deg);
- }
- #bigBigWolf .tooth14 {
- left: 254px;
- top: 11px;
- width: 22px;
- transform: rotate(55deg);
- -webkit-transform: rotate(55deg);
- -moz-transform: rotate(55deg);
- -o-transform: rotate(55deg);
- }
- #bigBigWolf .tooth15 {
- left: 242px;
- top: 16px;
- width: 29px;
- transform: rotate(100deg);
- -webkit-transform: rotate(100deg);
- -moz-transform: rotate(100deg);
- -o-transform: rotate(100deg);
- }
- #bigBigWolf .tooth16 {
- left: 243px;
- top: 25px;
- width: 13px;
- transform: rotate(20deg);
- -webkit-transform: rotate(20deg);
- -moz-transform: rotate(20deg);
- -o-transform: rotate(20deg);
- }
- #bigBigWolf .tooth17 {
- left: 237px;
- top: 29px;
- width: 11px;
- transform: rotate(100deg);
- -webkit-transform: rotate(100deg);
- -moz-transform: rotate(100deg);
- -o-transform: rotate(100deg);
- }
- #bigBigWolf .tooth18 {
- left: 219px;
- top: 36px;
- width: 24px;
- transform: rotate(165deg);
- -webkit-transform: rotate(165deg);
- -moz-transform: rotate(165deg);
- -o-transform: rotate(165deg);
- }
- #bigBigWolf .tooth19, #bigBigWolf .tooth21, #bigBigWolf .tooth23 {
- left: 255px;
- top: 15px;
- width: 22px;
- height: 1px;
- background: #FFF;
- transform: rotate(55deg);
- -webkit-transform: rotate(55deg);
- -moz-transform: rotate(55deg);
- -o-transform: rotate(55deg);
- }
- #bigBigWolf .tooth20, #bigBigWolf .tooth22 {
- left: 247px;
- top: 17px;
- width: 22px;
- height: 1px;
- background: #FFF;
- transform: rotate(100deg);
- -webkit-transform: rotate(100deg);
- -moz-transform: rotate(100deg);
- -o-transform: rotate(100deg);
- }
- #bigBigWolf .tooth21 {
- left: 255px;
- top: 16px;
- height: 2px;
- }
- #bigBigWolf .tooth22 {
- left: 248px;
- top: 19px;
- height: 4px;
- }
- #bigBigWolf .tooth23 {
- left: 255px;
- top: 19px;
- height: 2px;
- }
- #bigBigWolf .beard {
- left: 190px;
- bottom: 50px;
- width: 370px;
- height: 200px;
- z-index: 80;
- }
- #bigBigWolf .beard1, #bigBigWolf .beard2, #bigBigWolf .beard3, #bigBigWolf .beard4, #bigBigWolf .beard5, #bigBigWolf .beard6, #bigBigWolf .beard7, #bigBigWolf .beard8, #bigBigWolf .beard9, #bigBigWolf .beard10, #bigBigWolf .beard11, #bigBigWolf .beard12 {
- right: -1px;
- top: 32px;
- width: 40px;
- height: 2px;
- font-size: 0;
- background: #181818;
- z-index: 0;
- transform: rotate(3deg);
- -webkit-transform: rotate(3deg);
- -moz-transform: rotate(3deg);
- -o-transform: rotate(3deg);
- }
- #bigBigWolf .beard2 {
- right: 23px;
- top: 68px;
- width: 24px;
- transform: rotate(355deg);
- -webkit-transform: rotate(355deg);
- -moz-transform: rotate(355deg);
- -o-transform: rotate(355deg);
- }
- #bigBigWolf .beard3 {
- right: 34px;
- top: 90px;
- width: 22px;
- transform: rotate(30deg);
- -webkit-transform: rotate(30deg);
- -moz-transform: rotate(30deg);
- -o-transform: rotate(30deg);
- }
- #bigBigWolf .beard4 {
- right: 54px;
- top: 120px;
- width: 28px;
- transform: rotate(50deg);
- -webkit-transform: rotate(50deg);
- -moz-transform: rotate(50deg);
- -o-transform: rotate(50deg);
- }
- #bigBigWolf .beard5 {
- right: 89px;
- top: 132px;
- width: 22px;
- transform: rotate(60deg);
- -webkit-transform: rotate(60deg);
- -moz-transform: rotate(60deg);
- -o-transform: rotate(60deg);
- }
- #bigBigWolf .beard6 {
- right: 115px;
- top: 148px;
- width: 16px;
- transform: rotate(70deg);
- -webkit-transform: rotate(70deg);
- -moz-transform: rotate(70deg);
- -o-transform: rotate(70deg);
- }
- #bigBigWolf .beard7 {
- right: 145px;
- top: 162px;
- width: 24px;
- transform: rotate(90deg);
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -o-transform: rotate(90deg);
- }
- #bigBigWolf .beard8 {
- right: 175px;
- top: 166px;
- width: 16px;
- transform: rotate(110deg);
- -webkit-transform: rotate(110deg);
- -moz-transform: rotate(110deg);
- -o-transform: rotate(110deg);
- }
- #bigBigWolf .beard9 {
- right: 210px;
- top: 173px;
- width: 22px;
- transform: rotate(60deg);
- -webkit-transform: rotate(60deg);
- -moz-transform: rotate(60deg);
- -o-transform: rotate(60deg);
- }
- #bigBigWolf .beard10 {
- right: 245px;
- top: 173px;
- width: 14px;
- transform: rotate(130deg);
- -webkit-transform: rotate(130deg);
- -moz-transform: rotate(130deg);
- -o-transform: rotate(130deg);
- }
- #bigBigWolf .beard11 {
- right: 275px;
- top: 168px;
- width: 20px;
- transform: rotate(120deg);
- -webkit-transform: rotate(120deg);
- -moz-transform: rotate(120deg);
- -o-transform: rotate(120deg);
- }
- #bigBigWolf .beard12 {
- right: 300px;
- top: 156px;
- width: 16px;
- transform: rotate(140deg);
- -webkit-transform: rotate(140deg);
- -moz-transform: rotate(140deg);
- -o-transform: rotate(140deg);
- }
- #bigBigWolf .scar, #bigBigWolf .scar1, #bigBigWolf .scar2, #bigBigWolf .scar3, #bigBigWolf .scar4, #bigBigWolf .scar5 {
- left: 142px;
- bottom: 154px;
- width: 120px;
- height: 2px;
- font-size: 0;
- background: #181818;
- z-index: 60px;
- transform: rotate(43deg);
- -webkit-transform: rotate(43deg);
- -moz-transform: rotate(43deg);
- -o-transform: rotate(43deg);
- }
- #bigBigWolf .scar1 {
- left: -2px;
- top: -5px;
- width: 25px;
- transform: rotate(90deg);
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -o-transform: rotate(90deg);
- }
- #bigBigWolf .scar2 {
- left: 20px;
- top: 2px;
- width: 29px;
- transform: rotate(80deg);
- -webkit-transform: rotate(80deg);
- -moz-transform: rotate(80deg);
- -o-transform: rotate(80deg);
- }
- #bigBigWolf .scar3 {
- left: 50px;
- top: -2px;
- width: 29px;
- transform: rotate(90deg);
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -o-transform: rotate(90deg);
- }
- #bigBigWolf .scar4 {
- left: 74px;
- top: -4px;
- width: 22px;
- transform: rotate(92deg);
- -webkit-transform: rotate(92deg);
- -moz-transform: rotate(92deg);
- -o-transform: rotate(92deg);
- }
- #bigBigWolf .scar5 {
- left: 95px;
- top: -2px;
- width: 25px;
- transform: rotate(90deg);
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -o-transform: rotate(90deg);
- }
- </style>
- </head>
- <body>
- <div id="bigBigWolf">
- <div id="url"><a href="http://www.wanmeiff.com"></a></div>
- <div class="face">
- <div class="left"></div>
- <div class="right"></div>
- <div class="cover1"></div>
- <div class="cover2"></div>
- <div class="cover3"></div>
- <div class="cover4"></div>
- <div class="cover5"></div>
- </div>
- <div class="ear">
- <div class="left">
- <div class="inner"></div>
- <div class="cover1"></div>
- <div class="cover2"></div>
- <div class="cover3"></div>
- <div class="cover4"></div>
- <div class="cover5"></div>
- </div>
- <div class="right">
- <div class="inner"></div>
- <div class="cover1"></div>
- <div class="cover2"></div>
- <div class="cover3"></div>
- <div class="cover4"></div>
- <div class="cover5"></div>
- </div>
- </div>
- <div class="eye">
- <div class="left">
- <div class="inner">
- <div class="pupil">
- <div class="inner"></div>
- <div class="light1"></div>
- <div class="light2"></div>
- <div class="light3"></div>
- </div>
- </div>
- </div>
- <div class="right">
- <div class="inner">
- <div class="pupil">
- <div class="inner"></div>
- <div class="light1"></div>
- <div class="light2"></div>
- <div class="light3"></div>
- </div>
- </div>
- </div>
- </div>
- <div class="eyebrow">
- <div class="left">
- <div class="inner"></div>
- <div class="eyebrow1"></div>
- <div class="eyebrow2"></div>
- </div>
- <div class="right">
- <div class="inner"></div>
- <div class="eyebrow1"></div>
- </div>
- </div>
- <div class="nose">
- <div class="outer">
- <div class="inner"></div>
- <div class="light"></div>
- </div>
- </div>
- <div class="mouth">
- <div class="inner">
- <div class="tooth1"></div>
- <div class="tooth2"></div>
- <div class="tooth3"></div>
- <div class="tooth4"></div>
- <div class="tooth5"></div>
- <div class="tooth6"></div>
- <div class="tooth7"></div>
- <div class="tooth8"></div>
- <div class="tooth9"></div>
- <div class="tooth10"></div>
- <div class="tooth11"></div>
- <div class="tooth12"></div>
- <div class="tooth13"></div>
- <div class="tooth14"></div>
- <div class="tooth15"></div>
- <div class="tooth16"></div>
- <div class="tooth17"></div>
- <div class="tooth18"></div>
- <div class="tooth19"></div>
- <div class="tooth20"></div>
- <div class="tooth21"></div>
- <div class="tooth22"></div>
- <div class="tooth23"></div>
- </div>
- </div>
- <div class="beard">
- <div class="beard1"></div>
- <div class="beard2"></div>
- <div class="beard3"></div>
- <div class="beard4"></div>
- <div class="beard5"></div>
- <div class="beard6"></div>
- <div class="beard7"></div>
- <div class="beard8"></div>
- <div class="beard9"></div>
- <div class="beard10"></div>
- <div class="beard11"></div>
- <div class="beard12"></div>
- </div>
- <div class="scar">
- <div class="scar1"></div>
- <div class="scar2"></div>
- <div class="scar3"></div>
- <div class="scar4"></div>
- <div class="scar5"></div>
- </div>
- <div class="hat">
- <div class="inner">
- <div class="patch">
- <div class="line1"></div>
- <div class="line2"></div>
- <div class="line3"></div>
- <div class="line4"></div>
- <div class="line5"></div>
- <div class="line6"></div>
- <div class="line7"></div>
- <div class="line8"></div>
- <div class="line9"></div>
- <div class="line10"></div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
复制代码
|
|