加入收藏 | 设为首页 | 会员中心 | 我要投稿 焦作站长网 (https://www.0391zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 服务器 > 系统 > 正文

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

发布时间:2020-03-14 10:51:50 所属栏目:系统 来源:站长网
导读:这篇文章主要介绍了使用CSS3代码绘制可爱的Hello Kitty猫的相关资料,需要的朋友可以参考下

    border-top-left-radius: 138px 100px;   

    border-bottom-left-radius: 334px 310px;   

    background-colorwhite;   

    transform: rotate(23deg);   

    z-index: 99;   

}   

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

让耳朵和脸蛋连为一体:

CSS Code复制内容到剪贴板

.hello-kitty-div .left-ear-clean {   

    left146px;   

    top96px;   

    width250px;   

    height250px;   

    border-top-left-radius: 138px 100px;   

    border-bottom-left-radius: 360px 310px;   

    background-colorwhite;   

    transform: rotate(23deg);   

    z-index: 101;   

}  

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

再稍加点缀,美化一下:

CSS Code复制内容到剪贴板

.hello-kitty-div .left-ear-beautify {   

    left149px;   

    top221px;   

    width60px;   

    height30px;   

    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-colorblack;   

    transform: rotate(-52deg);   

    z-index: 102;   

}   

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

右耳

CSS Code复制内容到剪贴板

.hello-kitty-div .rightright-ear {   

    left600px;   

    top50px;   

    width250px;   

    height250px;   

(编辑:焦作站长网)

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

推荐文章
    热点阅读