使用CSS3绘制海贼王

2013年12月13日 发表评论 阅读评论

之前国外有网友用CSS3绘制了一个哆啦A梦,最近也在学习CSS,于是就自己画了一个海贼王的图标。源代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>むぎわら</title>
<style type="text/css">
h1 {
	text-align: center;
}
#container {
	margin: 50px auto;
	width: 502px;
	height: 322px;
}
#content {
	width: 100%;
	height: 100%;
	background: black;
	position: relative;
}
#content div {
	position: absolute;
}
.bone_area {
	/*background: rgba(0, 0, 255, 0.2);*/
	/*width: 400px; */
	/*height: 25px;*/
	width: 348px;
	height: 270px;
	left: 77px;
	top: 25px;
}
/* ------------------------ */
.bone {
	height: 25px;
	width: 370px;
	top: 122.5px;
	left: -11px;
	background: white;
}
div#left_bone {
	transform: rotate(36deg);
	-moz-transform: rotate(36deg);
	-webkit-transform: rotate(36deg);
}
div#right_bone {
	transform: rotate(-36deg);
	-moz-transform: rotate(-36deg);
	-webkit-transform: rotate(-36deg);
}
/* ------------------------ */
div.bone_end {
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	background: white;
	width: 32px;
	height: 32px;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}
#bone1 {
	top: 0px;
	left: 21px;
}
#bone2 {
	top: 21px;
	left: 0px;
}
#bone3 {
	top: 213px;
	left: 0;
}
#bone4 {
	top: 232px;
	left: 21px;
}
#bone5 {
	top: 21px;
	left: 308px;
}
#bone6 {
	top: 0px;
	left: 290px;
}
#bone7 {
	top: 213px;
	left: 306px;
}
#bone8 {
	top: 232px;
	left: 290px;
}
/* ------------------------ */
.head {
	top: 40px;
	left: 140px;
	width: 222px;
	height: 262px;
	/*background: rgba(0, 0, 255, 0.2);*/
}
#hat {
	width: 162px;
	height: 81px;
	left: 30px;
	border: 1px solid black;
	border-top-left-radius: 81px;
	border-top-right-radius: 81px;
	-moz-border-top-left-radius: 81px;
	-moz-border-top-right-radius: 81px;
	-webkit-border-top-left-radius: 81px;
	-webkit-border-top-right-radius: 81px;
	/* W3C Markup, IE10 Release Preview */
	background: linear-gradient(
		to bottom, #FEBF00 0%, #FEBF00 50%, #000000 50%, #900200 51%, #900200 100%);
	/* IE10 Consumer Preview */
	background: -ms-linear-gradient(
		top, #FEBF00 0%, #FEBF00 50%, #000000 50%, #900200 51%, #900200 100%);
	/* Mozilla Firefox */
	background: -moz-linear-gradient(
		top, #FEBF00 0%, #FEBF00 50%, #000000 50%, #900200 51%, #900200 100%);
	/* Opera */
	background: -o-linear-gradient(
		top, #FEBF00 0%, #FEBF00 50%, #000000 50%, #900200 51%, #900200 100%);
	/* Webkit (Safari/Chrome 10) */
	background: -webkit-gradient(
		linear, left top, left bottom, color-stop(0, #FEBF00), color-stop(0.8, #FEBF00), color-stop(0.8, #000000), color-stop(0.81, #900200), color-stop(1, #900200));
	/* Webkit (Chrome 11+) */
	background: -webkit-linear-gradient(
		top, #FEBF00 0%, #FEBF00 50%, #000000 50%, #900200 51%, #900200 100%);
}
#hat_line {
	background: #FEBF00;
	border: 3px solid black;
	width: 222px;
	height: 222px;
	top: -45px;
	transform:scale(1,0.15);
	-ms-transform:scale(1,0.15); /* IE 9 */
	-moz-transform:scale(1,0.15); /* Firefox */
	-webkit-transform:scale(1,0.15); /* Safari and Chrome */
	-o-transform:scale(1,0.15); /* Opera */
	border-radius: 111px;
	-moz-border-radius: 111px;
	-webkit-border-radius: 111px;
	-o-border-radius: 111px;
}
#face {
	width: 162px;
	height: 96px;
	left: 30px;
	top: 66px;
	background: #FFFFFF;
	border: 1px solid black;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	-moz-border-top-left-radius: 4px;
	-moz-border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	border-bottom-left-radius: 81px;
	border-bottom-right-radius: 81px;
	-moz-border-bottom-left-radius: 81px;
	-moz-border-bottom-right-radius: 81px;
	-webkit-border-bottom-left-radius: 81px;
	-webkit-border-bottom-right-radius: 81px;
	z-index: 2;
}
.eye {
	background: black;
	width: 45px;
	height: 45px;
	top: 6px;
	border-radius: 22.5px;
	-moz-border-radius: 22.5px;
	-webkit-border-radius: 22.5px;
}
#left_eye {
	left: 12px;
}
#right_eye {
	left: 105px;
}
#nose {
	background: black;
	width: 22px;
	height: 22px;
	border-radius: 11px;
	left: 70px;
	top: 55px;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
}
/* ------------------------ */
#chin {
	width: 90px;
	height: 100px;
	/*background: rgba(255, 255, 0, 0.2);*/
	left: 66px;
	top: 150px;
}
#bottom_chin {
	width: 90px;
	height: 40px;
	top: 45px;
	background: white;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-moz-border-top-left-radius: 5px;
	-moz-border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	border-bottom-left-radius: 40px;
	border-bottom-right-radius: 40px;
	-moz-border-bottom-left-radius: 40px;
	-moz-border-bottom-right-radius: 40px;
	-webkit-border-bottom-left-radius: 40px;
	-webkit-border-bottom-right-radius: 40px;
	border: 1px solid black;
}
#left_chin {
	width: 55px;
	height: 50px;
	top: 5px;
	background: white;
	transform: rotate(7deg);
	-moz-transform: rotate(7deg);
	-webkit-transform: rotate(7deg);
	-o-transform: rotate(7deg);
	-ms-transform: rotate(7deg);
	transform-origin: left bottom;
	-moz-transform-origin: left bottom;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	-o-transform-origin: left bottom;
	border-left: 1px solid black;
}
#right_chin {
	width: 55px;
	height: 50px;
	top: 5px;
	left: 36px;
	background: white;
	transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-webkit-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
	-ms-transform: rotate(-7deg);
	transform-origin: right bottom;
	-moz-transform-origin: right bottom;
	-webkit-transform-origin: right bottom;
	-ms-transform-origin: right bottom;
	-o-transform-origin: right bottom;
	border-right: 1px solid black;
}
.tooth {
	background: black;
}
#tooth_up1 {
	width: 42px;
	height: 1px;
	top: 27px;
	left: 3px;
	transform: rotate(9deg);
	-moz-transform: rotate(9deg);
	-webkit-transform: rotate(9deg);
	-o-transform: rotate(9deg);
	-ms-transform: rotate(9deg);
}
#tooth_up2 {
	width: 42px;
	height: 1px;
	top: 27px;
	left: 45px;
	transform: rotate(-9deg);
	-moz-transform: rotate(-9deg);
	-webkit-transform: rotate(-9deg);
	-o-transform: rotate(-9deg);
	-ms-transform: rotate(-9deg);
}
#tooth_down1 {
	width: 42px;
	height: 1px;
	top: 45px;
	left: 3px;
	transform: rotate(9deg);
	-moz-transform: rotate(9deg);
	-webkit-transform: rotate(9deg);
	-o-transform: rotate(9deg);
	-ms-transform: rotate(9deg);
}
#tooth_down2 {
	width: 46px;
	height: 1px;
	top: 45px;
	left: 45px;
	transform: rotate(-9deg);
	-moz-transform: rotate(-9deg);
	-webkit-transform: rotate(-9deg);
	-o-transform: rotate(-9deg);
	-ms-transform: rotate(-9deg);
}
#vtooth1 {
	width: 1px;
	height: 40px;
	left: 22px;
	top: 6px;
	transform: rotate(7deg);
	-moz-transform: rotate(7deg);
	-webkit-transform: rotate(7deg);
	-o-transform: rotate(7deg);
	-ms-transform: rotate(7deg);
}
#vtooth2 {
	width: 1px;
	height: 40px;
	left: 44px;
	top: 10px;
}
#vtooth3 {
	width: 1px;
	height: 40px;
	left: 66px;
	top: 6px;
	transform: rotate(-7deg);
	-moz-transform: rotate(-7deg);
	-webkit-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
	-ms-transform: rotate(-7deg);
}
</style>
</head>
<body>
<h1>ワンピース -- むぎわら</h1>
<div id="container">
	<div id="content">
		<div class="bone_area">
			<div id="left_bone" class="bone"></div>
			<div id="right_bone" class="bone"></div>
			<div id="bone1" class="bone_end"></div>
			<div id="bone2" class="bone_end"></div>
			<div id="bone3" class="bone_end"></div>
			<div id="bone4" class="bone_end"></div>
			<div id="bone5" class="bone_end"></div>
			<div id="bone6" class="bone_end"></div>
			<div id="bone7" class="bone_end"></div>
			<div id="bone8" class="bone_end"></div>
		</div>
		<div class="head">
			<div id="hat"></div>
			<div id="hat_line"></div>
			<div id="face">
				<div class="eye" id="left_eye"></div>
				<div class="eye" id="right_eye"></div>
				<div id="nose"></div>
			</div>
			<div id="chin">
				<div id="bottom_chin"></div>
				<div id="left_chin"></div>
				<div id="right_chin"></div>
				<div id="tooth_up1" class="tooth"></div>
				<div id="tooth_up2" class="tooth"></div>
				<div id="tooth_down1" class="tooth"></div>
				<div id="tooth_down2" class="tooth"></div>
				<div id="vtooth1" class="tooth"></div>
				<div id="vtooth2" class="tooth"></div>
				<div id="vtooth3" class="tooth"></div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

将以上代码保存为X.html看到的就是一个海贼王草帽logo 。 

注:该文摘自于龍昌博客 。




本站的发展离不开您的资助,金额随意,欢迎来赏!

You can donate through PayPal.
My paypal id: itybku@139.com
Paypal page: https://www.paypal.me/361way

分类: http/html/web 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.