使用CSS3代码绘制可爱的Hello Kitty猫

2020-05-12 07:53:27易采站长站整理

.hello-kitty-div .left-ear {   
    left: 112px;   
    top: 61px;   
    width: 250px;   
    height: 250px;   
    border-top: 33px solid black;   
    border-bottom: 30px solid black;   
    border-left: 28px solid black;   
    border-right: 30px solid black;   
    border-top-left-radius: 138px 100px;   
    border-bottom-left-radius: 334px 310px;   
    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: 138px 100px;   
    border-bottom-left-radius: 360px 310px;   
    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: 20px 15px;   
    border-top-rightright-radius: 25px 15px;   
    border-bottom-left-radius: 20px 15px;   
    border-bottom-rightright-radius: 25px 15px;   
    background-color: black;   
    transform: rotate(-52deg);   
    z-index: 102;   
}   

右耳