之前国外有网友用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 。
注：该文摘自于龍昌博客 。