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

    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;   

}   

右耳

CSS Code复制内容到剪贴板

.hello-kitty-div .rightright-ear {   

    left: 600px;   

    top: 50px;   

    width: 250px;   

    height: 250px;   

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!