css3畫豬頭

標籤：target   ati   ima   blank   width   png   .com   bsp   技術   

每周都要有前端分享，本想分享一下c3動畫，準備工作畫個豬頭先。結果畫完果斷的放棄了????附上代碼

html,
body {
background: #ff6600;
}
.body {
position: relative;
top: 50px;
left: 50%;
width: 300px;
margin-left: -150px;
}
.face {
height: 180px;
width: 180px;
background: white;
border-radius: 50%;
border: 15px solid white;
position: absolute;
top: -10px;
left: -30px;
}
.eyes:before,
.eyes:after {
content: "";
position: absolute;
width: 30px;
height: 25px;
border-top: 2px solid #ff6600;
border-left: 2px solid #ff6600;
border-top-left-radius: 100%;
top: 36px;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
.eyes:before {
left: 40px;
}
.eyes:after {
right: 40px;
}
.nose {
background: #ff6600;
height: 50px;
width: 70px;
border: 15px solid white;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -30px;
}
.nose:before,
.nose:after {
content: "";
height: 12px;
width: 12px;
border-radius: 50%;
background: white;
position: absolute;
top: 18px;
}
.nose:before {
left: 10px;
}
.nose:after {
right: 10px;
}
.left_ear,
.right_ear {
overflow: hidden;
height: 70px;
width: 60px;
position: absolute;
background: transparent;
}
.left_ear {
top: -18px;
left: -46px;
-webkit-transform: rotate(58deg);
transform: rotate(32deg);
}
.right_ear {
top: -14px;
left: 170px;
-webkit-transform: rotate(120deg);
transform: rotate(146deg);
}
.left_ear:before,
.right_ear:before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
content: "";
height: 50px;
width: 50px;
position: relative;
left: 15px;
display: block;
background: transparent;
#ff6600;
border: 15px solid white;
border-radius: 5px 80px 30px 80px;
}
.mouth {
width: 100px;
height: 80px;
border-radius: 70%;
border-bottom: 10px #ff6600 solid;
position: absolute;
top: 60px;
left: 38px;
}

<div class="body">
<div class="face">
<div class="left_ear"></div>
<div class="right_ear"></div>
<div class="eyes"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>

</div>

 

css3畫豬頭