使用CSS3代码绘制可爱的HelloKitty猫_海龟画图helloKitty代码 - CSDN文库

css3绘制hello

5星 · 超过95%的资源 13 浏览量更新于2023-03-16 评论 1 收藏 408KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了使用CSS3代码绘制可爱的Hello Kitty猫的相关资料,需要的朋友可以参考下

感觉这个 Hello Kitty 画的还不错，心血来潮也用 CSS3 画了个 Hello Kitty，现在在这里记录一下详细的绘制过程。想要源码、素材、在线演示的

同学可以直接拉到最下面。我们先看下原图：我们先看下原图：

结构分解结构分解

从上图可以看出，Hello Kitty 由脸蛋、耳朵、红色蝴蝶结、眼睛、鼻子和六根胡须构成，所以 DOM 结构也相对简单：

CSS Code复制内容到剪贴板

1. <div class="hello-kitty-div">

2.

3. <div class="face"></div>

4.

5. <div class="left-ear"></div>

6. <div class="left-ear-clean"></div>

7. <div class="left-ear-beautify"></div>

8.

9. <div class="right-ear"></div>

10. <div class="right-ear-clean"></div>

11.

12. <div class="bowknot-outside-left-top-container">

13. <div class="bowknot-outside-left-top"></div>

14. </div>

15. <div class="bowknot-outside-left-bottom-container">

16. <div class="bowknot-outside-left-bottom"></div>

17. </div>

18. <div class="bowknot-outside-right-top-container">

19. <div class="bowknot-outside-right-top"></div>

20. </div>

21. <div class="bowknot-outside-right-bottom-container">

22. <div class="bowknot-outside-right-bottom"></div>

23. </div>

24. <div class="bowknot-inside-left"></div>

25. <div class="bowknot-inside-right"></div>

26. <div class="bowknot-inside-center"></div>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余7页未读，立即下载

评论10

好运爆棚

2023-06-16

这篇文件非常详细地介绍了如何使用CSS3来绘制可爱的Hello Kitty猫。

weixin_38564085

粉丝: 5
资源: 938

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈