加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 黄冈站长网 (http://www.0713zz.com/)- 数据应用、建站、人体识别、智能机器人、语音技术!
当前位置: 首页 > 服务器 > 系统 > 正文

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

发布时间:2020-03-15 21:05:25 所属栏目:系统 来源:站长网
导读:副标题#e# 感觉这个 Hello Kitty 画的还不错,心血来潮也用 CSS3 画了个 Hello Kitty,现在在这里记录一下详细的绘制过程。想要源码、素材、在线演示的同学可以直接拉到最下面。我们先看下原图: 结构分解 从上图可以看出,Hello Kitty 由脸蛋、耳朵、红色

    border-top: 33px solid black;   

    border-bottom: 28px solid black;   

    border-left: 30px solid black;   

    border-right: 29px solid black;   

    border-top-left-radius: 220px 170px;   

    border-top-rightright-radius: 90px 57px;   

    border-bottom-rightright-radius: 334px 245px;   

    background-color: white;   

    transform: rotate(-21deg);   

    z-index: 99;   

}   

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

    left: 700px;   

    top: 105px;   

    width: 120px;   

    height: 120px;   

    background-color: white;   

    z-index: 101;   

}   

右耳画的比较粗糙,因为马上就要画蝴蝶结了。

蝴蝶结

(编辑:PHP编程网 - 黄冈站长网)

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

热点阅读