强！用CSS画个灰太狼

最新推荐文章于 2024-01-02 10:45:01 发布
最新推荐文章于 2024-01-02 10:45:01 发布
阅读量280 收藏 1
点赞数 1
分类专栏： T_未分类 文章标签： CSS webkit Firefox IE XHTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/benwdm/article/details/83728685
版权

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

 

<!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>我是灰太狼</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.jzc.in"></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>

 

在firefox下的效果：



 

 

 

 

 

benwdm
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用HTML5的canvas标签实现灰太狼图像的绘制
执笔写流年殇的博客
09-23 839
Canvas绘制的灰太狼 - 当前浏览器不支持canvas var d = document.getElementById('demo'); function funLoad(){        var cxt=d.getContext('2d') ;     cxt.beginPath() ;     cxt.lineWidth = 2 ;
CSS3绘制灰太狼动画，绝对精彩
weixin_34313182的博客
05-15 147
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &amp
css3绘图制作灰太狼头像动画特效
W Y L
04-29 453
html代码： <body> <div id="bigBigWolf"> <div id="url"><a href="#"></a></div> <div class="face"> <div class="left"></div> &lt...
用css3制作的灰太狼
duxianwei520的专栏
05-06 379
看看欣赏欣赏
用Python代码画出灰太狼
qq_54434938的博客
04-16 1385
用python代码画出灰太狼，仅使用turtle库。
css和html做灰太狼2D动画
最新发布
06-11
- 使用HTML创建灰太狼角色的基本形状，比如圆形头部、身体、四肢等，并为每个元素添加唯一的ID或class，方便CSS操作。 ```html <div class="wolfgang head"></div> <div class="wolfgang body"></div> ...
HTML5 Canvas绘制灰太狼图像效果
06-12
- 使用`fillStyle`和`fill()`来填充灰太狼的各个部分，通过调整颜色和透明度来实现逼真的效果。 - 如果有需要，可以使用`strokeStyle`和`stroke()`来描绘边框。 - 为了创建动画效果，可能需要通过定时器（如`...
从零开发一个灰太狼游戏是什么样的体验？（建议收藏）
热门推荐
李南江
06-27 2万+
极客江南： 一个对开发技术特别执着的程序员，对移动开发有着独到的见解和深入的研究，有着多年的iOS、Android、HTML5开发经验，对NativeApp、HybridApp、WebApp开发有着独到的见解和深入的研究, 除此之外还精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多种Web前端技术及Java、PHP等服务端技术。 先上一张效果图： 开发思路 开发一个游戏，首先你需要知道游戏的规则。 这个游戏名为狂.
有手就行！css扑克旋转动画效果
fan_ge_的博客
03-29 872
CSS3：过渡动画及关键帧动画-案例：扑克牌的特效翻转过渡动画及关键帧动画 过渡动画及关键帧动画 大致介绍了CSS3中的技术之一：动画，因为我也是学习者，这只是我自己的观点，如有错误，请指出。废话不多说，开始步入正题： 想必大家都看过动画片：猫和老鼠，其剧情幽默轻松，让人印象深刻。就像灰太狼永远都吃不到羊，汤姆也斗不过杰瑞。那么这么好看的动画片是怎么拍出来的呢？是直接实拍吗？想必大家都没深究。今天就讲讲这些动画是怎么呈现在我们面前的。 我们所看到的动画是一帧一帧的画面，当连起来播放，就是一个完整的动画了。那
Flash制作的元旦快乐动画（喜羊羊与灰太狼）
04-23
自己制作的元旦小动画，寄给朋友家人或者小朋友都是不错的选择。
游戏 喜羊羊大战灰太狼源代码
08-05
暑假实习的时候 我们用eclipse 3.5做的游戏喜洋洋大战灰太狼
喜羊羊文件
01-02
喜羊羊的FLASH 原件
python画小猪佩奇
06-15
python画小猪佩奇的源代码
用python绘制小猪佩奇
03-22
使用python自带的画图库turtle绘制小猪佩奇
HTML5canvas绘画灰太狼--恶搞
dczjn9698的博客
04-10 433
直接上源代码： <html> </body> <div id='d' style="position:absolute;left:10px;top:20px;width:200px;height:50px;font-size:26px;"></div> <canvas id="demo" width="400" heigh...
使用HTML5中的canvas绘制灰太狼图像
byOneself的博客
09-22 1236
大家好，我是byoneself，本次将为大家分享一下使用HTML5中的canvas绘制一个灰太狼图像，希望对大家有所帮助。
Python灰太狼（完整代码）
兔子王
01-02 2万+
用python画灰太狼的完整代码。
用canvas 绘制一个灰太狼
Oraice的专栏
11-07 1368
用canvas 绘制一个灰太狼
python 使用 turtle库 画“皮卡丘”
Sxphd的博客
06-15 5005
from turtle import * screensize(800, 600, "#fed926") setup(width=1000, height=1000, startx=50, starty=50) pensize(5) pencolor("black") speed(11) def leftEar(): # 海龟方向 setheading(30) penup() fillcolor("#1f1515") goto(110, 150) # .
CSS3 动画大赏：47个炫酷示例
"47个惊人的CSS3动画示例" CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了许多新特性，使得网页设计更加丰富多彩和动态化。本资源汇总了47个利用CSS3实现的惊人动画效果，展示了其在网页设计中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值