CSS3绘制灰太狼动画,绝对精彩

<!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><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<div id="bigBigWolf">

<div id="url"><a href="http://www.imilo.net"></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>

时间: 2024-11-04 22:06:27

CSS3绘制灰太狼动画,绝对精彩的相关文章

用纯css3绘制的能自适应浏览器的哆啦a梦动画

最近在研究用css3绘制矢量图,于是就用纯css3绘制了能自适应浏览器宽度的哆啦a梦动画,兼容css3的浏览器都可以正常观看,下面只是网页截图: 废话不多说了,直接给代码. html 代码: <div class="dlam" title="用纯css3绘制的能自适应浏览器的哆啦a梦动画"> <div class="bozi"> <div class="lingdan"> <div c

CSS3绘制8种超炫的加载动画

CSS3绘制8种超炫的加载动画     逛前端开发网站的时候,偶尔发现一组非常炫酷的CSS3加载动画,遂迫不及待的做个Demo保存下来. 这些加载动画用到了CSS3的旋转transform属性,颜色透明度设置和伪元素操作等CSS技术.奇妙的组合,产生了意想不到的效果. 1.上下起伏波动的加载动画: #loader1, #loader1:before, #loader1:after { background: #f2fa08; -webkit-animation: load1 1s infinit

CSS3实现带动画、阴影的表单提示特效

CSS3实现带动画.阴影的表单提示特效,Form表单提示效果,请不要使用IE浏览,否则你会错过很多精彩的效果,在火狐下你会看到,漂亮的带阴影的表单文本框,而且是圆角的,当鼠标点击表单框的时候出现动画的提示效果,相信你看了之后会喜欢的. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>石家庄标准件</tit

用纯CSS3绘制萌系漫画人物动态头像

大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测漏! 示例中用到的主要CSS3特性如下: border-radius:绘制边框圆角. transform:主要是旋转(rotate)和偏斜(skew),用于绘制各种形状. animation:动画效果的实现,例如头发的飘动.眼睛的闪动. 只要掌握了这几个特性,你也能画出同样奇妙的CSS3动画,赶快试试吧!

CSS3绘制旋转的太极图案

1.效果布局主要用了用了3个DIV,配合:before.:after利用css3中的圆角(border-radius).阴影(box-shadow)完成. 2.动画效果CSS3中的@keyframes.animation <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3绘制旋转的太极图案</title> <style> bo

15个超强悍的CSS3圆盘时钟动画赏析

在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有一部分利用jQuery和SVG,让我们一起来看看吧. 1.纯CSS3/SVG实现的带秒针表盘圆盘复古时钟 现在的网页上圆盘时钟越来越少见了,更多的是数字时钟和数字日历.之前我们分享过一些基于jQuery和CSS3的圆盘时钟动画,比如纯CSS3 3D立体圆盘时钟动画和jQuery实现一个挂在墙上的圆盘

强大的CSS3/JS:帧动画的多种实现方式与性能对比

Web动画形式 首先我们来了解一下Web有哪些动画形式 1\. CSS3动画 Transform(变形) Transition(过渡) Animation(动画) 2\. JS动画(操作DOM.修改CSS属性值) 3\. Canvas动画 4\. SVG动画 5\. 以Three.js为首的3D动画 以上各种动画形式都可以制作出一种类型的动画,那就是帧动画,也叫序列帧动画,定格动画,逐帧动画等,这里我们统一用帧动画来表述. 这里推荐一下我的前端学习交流扣qun:767273102 ,里面都是学习

9款极具创意的HTML5/CSS3进度条动画(免积分下载)

尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detail/yangwei19680827/7352505 今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加

css3绘制六边形

六边形思路:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. <h2>三角形在左右两侧</h2> <!-- 第一种方法 不兼容低版本浏览器 --> <div class="hexagon1"></div> <!-- 第二种方法 兼容低版本浏览器 --> <div class="he