今天闲来无事，心血来潮想用css来画个东西，上网随便找了个简单的holle kitty的图就找着写了。成品很粗糙，没有处理细节，没有优化代码，写完就直接放上了，不喜勿喷。
原图.png
上代码：
<!DOCTYPE html>
<html>
<head>
<title>holle kitty</title>
<style>
span,i{
display: inline-block;
}
.box{
position: relative;
background: #fff;
width: 500px;
height: 500px;
margin: 50px auto;
border: 1px solid #000;
}
.head{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%) rotate(2deg);
width: 353px;
height: 278px;
border-radius: 49%;
border: 8px solid #000;
}
.box-shadow-p{
box-shadow: 0 0 1px 1px #000;
}
/***眼睛***/
.head .eye{
position: absolute;
top: 52%;
width: 22px;
height: 30px;
background: #000;
border-radius: 50%;
}
.head .eye-l{
left: 25%;
}
.head .eye-r{
right: 25%;
}
/***眼睛***/
/***鼻子***/
.head .nose{
position: absolute;
top: 70%;
left: 50%;
transform: translateX(-50%) rotate(2deg);
background: #FFF60A;
width: 36px;
height: 29px;
border: 8px solid #000;
box-sizing: border-box;
border-radius: 50%;
}
/***鼻子***/
/***胡子***/
.head .mustache,
.head .mustache span{
position: absolute;
background: #000;
}
.head .mustache .one::before{
content: '';
position: absolute;
top: 0;
left: -6px;
width: 36px;
height: 8px;
background: #000;
border-radius: 42%;
transform: rotate(5deg);
box-shadow: 0 0 1px 1px #000;
}
.head .mustache .two{
position: absolute;
top: 0;
left: -21px;
border-top-left-radius: 5px;
border-top-right-radius: 2px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.head .mustache .two::before{
content: '';
position: absolute;
top: 0px;
left: -16px;
width: 41px;
height: 8px;
background: #000;
border-radius: 40%;
transform: rotate(-7deg);
box-shadow: 0 0 1px 1px #000;
}
.head .mustache-1{
top: 54%;
left: -5px;
}
.head .mustache-2{
top: 67%;
left: 8px;
transform: rotate(-15deg);
}
.head .mustache-2 .one::before{
top: -1px;
left: -6px;
width: 27px;
transform: rotate(2deg);
}
.head .mustache-3{
top: 78%;
left: 33px;
transform: rotate(-15deg);
width: 0;
}
.head .mustache-3 .one{
width: 0;
}
.head .mustache-3 .one::before{
top: -1px;
left: -11px;
width: 27px;
height: 7px;
transform: rotate(-2deg);
border-radius: 44%;
}
.head .mustache-3 .two::before{
top: 1px;
left: -30px;
width: 58px;
border-radius: 33%;
transform: rotate(-7deg);
}
.head .mustache-4{
top: 54%;
right: -7px;
}
.head .mustache-5{
top: 67%;
right: -7px;
transform: rotate(7deg);
}
.head .mustache-5 .one::before{
left: -16px;
width: 38px;
height: 7px;
transform: rotate(-2deg);
border-radius: 37%;
}
.head .mustache-5 .two::before{
top: 0;
right: -11px;
width: 47px;
height: 7px;
transform: rotate(-2deg);
border-radius: 22%;
}
.head .mustache-6{
top: 80%;
right: 5px;
transform: rotate(17deg);
}
.head .mustache-6 .one::before{
left: -24px;
width: 46px;
height: 7px;
transform: rotate(2deg);
border-radius: 30%;
}
.head .mustache-6 .two::before{
top: 0;
right: 0;
width: 28px;
height: 7px;
transform: rotate(-2deg);
border-radius: 50%;
}
/***胡子***/
/***耳朵***/
.head .ear{
position: absolute;
background: #fff;
width: 86px;
height: 55px;
border: 8px solid #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/22px 31px 0 0;
transform: rotate(16deg);
}
.head .ear::before{
content: '';
position: absolute;
width: 88px;
height: 54px;
border: 8px solid #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/25px 46px 0 0;
transform: rotate(-101deg);
}
.head .ear-l{
top: -11px;
left: 5px;
}
.head .ear-l::before{
top: -3px;
left: -21px;
}
.head .ear-r{
top: -10px;
right: -11px;
transform: rotate(-22deg);
}
.head .ear-r::before{
top: -3px;
right: -10px;
transform: rotate(112deg);
}
/***耳朵***/
/***爪子***/
.head .claw{
position: absolute;
bottom: -19px;
background: #fff;
width: 82px;
height: 55px;
border: 8px solid #000;
border-color: #000 transparent transparent;
border-radius: 50%;
}
.head .claw::before{
content: '';
position: absolute;
top: -14px;
left: -4px;
width: 82px;
height: 65px;
border: 8px solid #000;
border-color: transparent transparent transparent #000;
border-radius: 50%;
transform: rotate(-4deg);
}
.head .claw::after{
content: '';
position: absolute;
top: -10px;
right: -8px;
width: 82px;
height: 65px;
border: 8px solid #000;
border-color: transparent #000 transparent transparent;
border-radius: 50%;
transform: rotate(1deg);
}
.head .claw i:nth-child(1){
position: absolute;
bottom: -7px;
left: 0;
width: 40px;
height: 40px;
border: 8px solid #000;
border-color: transparent transparent #000 transparent;
border-radius: 50%;
transform: rotate(7deg);
}
.head .claw i:nth-child(2){
position: absolute;
bottom: -10px;
left: 30px;
width: 42px;
height: 42px;
border: 8px solid #000;
border-color: transparent transparent #000 transparent;
border-radius: 50%;
transform: rotate(7deg);
}
.head .claw-l{
left: 19px;
transform: rotate(-10deg);
}
.head .claw-r{
right: 19px;
transform: rotate(-2deg);
}
.head .claw-r::before{
top: -13px;
left: -8px;
width: 97px;
height: 65px;
transform: rotate(-3deg);
}
.head .claw-r i:nth-child(1) {
bottom: -8px;
left: -4px;
width: 44px;
height: 45px;
transform: rotate(0deg);
}
/***爪子***/
/***发卡***/
.head .hairpin{
position: absolute;
top: -4px;
right: -25px;
width: 180px;
height: 80px;
transform: rotate(20deg);
}
.head .hairpin span{
background-color: red;
}
.head .hairpin .hairpin-triangle{
position: absolute;
top: 0;
border: 8px solid #000;
}
.head .hairpin .triangle-l{
left: 0;
width: 88px;
height: 80px;
border-radius: 50%/37px 37px 70px 70px;
transform: rotate(268deg);
}
.triangle-r{
right: 0;
top: 12px !important;
width: 60px;
height: 60px;
border: 8px solid #000;
border-radius: 50%/23px 23px 50px 50px;
transform: rotate(90deg);
}
.head .hairpin .circle{
position: absolute;
top: 20px;
left: 70px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 8px solid #000
}
.head .hairpin .circle::before,
.head .hairpin .circle::after{
content: '';
position: absolute;
top: 3px;
left: -29px;
width: 18px;
height: 18px;
border-radius: 50%;
border: 8px solid #000;
border-color: #000 transparent #000 #000;
}
.head .hairpin .circle::after{
left: 40px;
border-color: #000 #000 #000 transparent;
}
/***发卡***/
</style>
</head>
<body>
<div class="box">
<div class="head box-shadow-p">
<!-- 眼睛 -->
<span class="eye eye-l"></span>
<span class="eye eye-r"></span>
<!-- 鼻子 -->
<span class="nose"></span>
<!-- 胡子 -->
<span class="mustache mustache-1 ">
<span class="one"></span>
<span class="two"></span>
</span>
<span class="mustache mustache-2">
<span class="one"></span>
<span class="two"></span>
</span>
<span class="mustache mustache-3">
<span class="one"></span>
<span class="two"></span>
</span>
<span class="mustache mustache-4 ">
<span class="one"></span>
<span class="two"></span>
</span>
<span class="mustache mustache-5">
<span class="one"></span>
<span class="two"></span>
</span>
<span class="mustache mustache-6">
<span class="one"></span>
<span class="two"></span>
</span>
<!-- 耳朵 -->
<span class="ear ear-l"></span>
<span class="ear ear-r"></span>
<!-- 发卡 -->
<span class="hairpin">
<span class="hairpin-triangle triangle-l"></span>
<span class="hairpin-triangle triangle-r"></span>
<span class="circle"></span>
</span>
<!-- 爪子 -->
<span class="claw claw-l">
<i></i>
<i></i>
</span>
<span class="claw claw-r">
<i></i>
<i></i>
</span>
</div>
</div>
</body>
</html>
成品.png
网友评论