Kitty⽤HTML和css咋做，使⽤CSS3代码绘制可爱的HelloKitty
猫
感觉这个 Hello Kitty 画的还不错，⼼⾎来潮也⽤ CSS3 画了个 Hello Kitty，现在在这⾥记录⼀下详细的绘制过程。想要源码、素材、在线演⽰的同学可以直接拉到最下⾯。我们先看下原图：
结构分解
从上图可以看出，Hello Kitty 由脸蛋、⽿朵、红⾊蝴蝶结、眼睛、⿐⼦和六根胡须构成，所以 DOM 结构也相对简单：
CSS Code复制内容到剪贴板
开始绘制
可以利⽤ Photoshop 的参考线精确的计算出元素的 left、top、width、height、border-width 以及四个⾓的⽔平 radius 值和垂直radius 值，有偏差的地⽅再微调⼀下基本就可以了。
脸蛋
CSS Code复制内容到剪贴板
.hello-kitty-div .face {
left:107px;
top:77px;
width:747px;
height:566px;
border-top:35pxsolidblack;
border-bottom:31pxsolidblack;
border-left:29pxsolidblack;
好看的css代码border-right:30pxsolidblack;
border-top-left-radius:355px333px;
border-top-rightright-radius:355px333px; border-bottom-left-radius:370px285px; border-bottom-rightright-radius:330px255px; background-color:white;
z-index: 100;
}
左⽿
CSS Code复制内容到剪贴板
.hello-kitty-div .left-ear {
left:112px;
top:61px;
width:250px;
height:250px;
border-top:33pxsolidblack;
border-bottom:30pxsolidblack;
border-left:28pxsolidblack;
border-right:30pxsolidblack;
border-top-left-radius:138px100px; border-bottom-left-radius:334px310px; background-color:white;
transform: rotate(23deg);
z-index: 99;
}
让⽿朵和脸蛋连为⼀体：
CSS Code复制内容到剪贴板
.hello-kitty-div .left-ear-clean {
left:146px;
top:96px;
width:250px;
height:250px;
border-top-left-radius:138px100px; border-bottom-left-radius:360px310px; background-color:white;
transform: rotate(23deg);
z-index: 101;
}
再稍加点缀，美化⼀下：
CSS Code复制内容到剪贴板
.hello-kitty-div .left-ear-beautify {
left:149px;
top:221px;
width:60px;
height:30px;
border-top-left-radius:20px15px;
border-top-rightright-radius:25px15px; border-bottom-left-radius:20px15px;
border-bottom-rightright-radius:25px15px; background-color:black;
transform: rotate(-52deg);
z-index: 102;
}
右⽿
CSS Code复制内容到剪贴板
.hello-kitty-div .rightright-ear {
left:600px;
top:50px;
width:250px;
height:250px;
border-top:33pxsolidblack;
border-bottom:28pxsolidblack;
border-left:30pxsolidblack;
border-right:29pxsolidblack;
border-top-left-radius:220px170px;
border-top-rightright-radius:90px57px;
border-bottom-rightright-radius:334px245px; background-color:white;
transform: rotate(-21deg);
z-index: 99;
}
.hello-kitty-div .rightright-ear-clean {
left:700px;
top:105px;
width:120px;
height:120px;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。