您现在的位置是：网站首页> 编程资料编程资料

使用CSS3代码绘制可爱的Hello Kitty猫_css3_CSS_网页制作_

2021-09-13 1103人已围观

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

感觉这个 Hello Kitty 画的还不错，心血来潮也用 CSS3 画了个 Hello Kitty，现在在这里记录一下详细的绘制过程。想要源码、素材、在线演示的同学可以直接拉到最下面。我们先看下原图：

结构分解

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

CSS Code复制内容到剪贴板
  1. "hello-kitty-div">   
  2.        
  3.     "face">
  
  •        
  •     "left-ear">
    •   
  •     "left-ear-clean">
    •   
  •     "left-ear-beautify">
    •   
  •        
  •     "right-ear">
    •   
  •     "right-ear-clean">   
  •        
  •     "bowknot-outside-left-top-container">   
  •         "bowknot-outside-left-top">   
  •        
  •     "bowknot-outside-left-bottom-container">   
  •         "bowknot-outside-left-bottom">   
  •        
  •     "bowknot-outside-right-top-container">   
  •         "bowknot-outside-right-top">   
  •        
  •     "bowknot-outside-right-bottom-container">   
  •         "bowknot-outside-right-bottom">   
  •        
  •     "bowknot-inside-left">   
  •     "bowknot-inside-right">   
  •     "bowknot-inside-center">   
  •        
  •     "left-eye">   
  •        
  •     "right-eye">   
  •        
  •     "nose">   
  •        
  •     "left-moustache-1">   
  •     "left-moustache-2">   
  •     "left-moustache-3">   
  •        
  •     "right-moustache-1">   
  •     "right-moustache-2">   
  •     "right-moustache-3">   
  •    

    • 开始绘制

    可以利用 Photoshop 的参考线精确的计算出元素的 left、top、width、height、border-width 以及四个角的水平 radius 值和垂直 radius 值，有偏差的地方再微调一下基本就可以了。

    脸蛋

    CSS Code复制内容到剪贴板
    1. .hello-kitty-div .face {   
    2.     left: 107px;   
    3.     top: 77px;   
    4.     width: 747px;   
    5.     height: 566px;   
    6.     border-top: 35px solid black;   
    7.     border-bottom: 31px solid black;   
    8.     border-left: 29px solid black;   
    9.     border-right: 30px solid black;   
    10.     border-top-left-radius: 355px 333px;   
    11.     border-top-rightright-radius: 355px 333px;   
    12.     border-bottom-left-radius: 370px 285px;   
    13.     border-bottom-rightright-radius: 330px 255px;   
    14.     background-color: white;   
    15.     z-index: 100;   
    16. }   

    左耳

    CSS Code复制内容到剪贴板
    1. .hello-kitty-div .left-ear {   
    2.     left: 112px;   
    3.     top: 61px;   
    4.     width: 250px;   
    5.     height: 250px;   
    6.     border-top: 33px solid black;   
    7.     border-bottom: 30px solid black;   
    8.     border-left: 28px solid black;   
    9.     border-right: 30px solid black;   
    10.     border-top-left-radius: 138px 100px;   
    11.     border-bottom-left-radius: 334px 310px;   
    12.     background-color: white;   
    13.     transform: rotate(23deg);   
    14.     z-index: 99;   
    15. }   

    让耳朵和脸蛋连为一体：

    CSS Code复制内容到剪贴板
    1. .hello-kitty-div .left-ear-clean {   
    2.     left: 146px;   
    3.     top: 96px;   
    4.     width: 250px;   
    5.     height: 250px;   
    6.     border-top-left-radius: 138px 100px;   
    7.     border-bottom-left-radius: 360px 310px;   
    8.     background-color: white;   
    9.     transform: rotate(23deg);   
    10.     z-index: 101;   
    11. }  

    再稍加点缀，美化一下：

    CSS Code复制内容到剪贴板
    1. .hello-kitty-div .left-ear-beautify {   
    2.     left: 149px;   
    3.     top: 221px;   
    4.     width: 60px;   
    5.     height: 提示： 本文由神整理自网络，如有侵权请联系本站删除！
      本站声明：
      1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
      2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

      上一篇：CSS margin全面了解_CSS教程_CSS_网页制作_

      下一篇：关于排版中经常见的问题及解决方法(分享)_CSS教程_CSS_网页制作_

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网