【二次元的CSS】—— 用 DIV + CSS3 画Hello Kitty（详解步骤）

头像
lancer07
    37812
    发布于
     

    原本自己也想画Hello Kitty，正巧看到一位外国友人Lauren McConachie（她的个人网站： http://lorenai.com。）也用相同的方法画了。 且细节相当到位。在此我也分享一下。（出于尊重原作者的目的，CSS我就不修改了）

    图片描述

    GitHub传送门：https://github.com/lancer07/css3HelloKitty

    第一步：从头说起

    难点是胡须，因为胡须有点弯的，所以每根胡须需要2个元素来实现

    图片描述

    <div id="head">
   <div id="face">
      <div class="lefteye"></div>
      <div class="righteye"></div>
      <div class="nose"></div>
   </div>
                
   <div class="leftwhiskers one">
       <span></span>
   </div>
   <div class="leftwhiskers two">
       <span></span>
   </div>
   <div class="leftwhiskers three">
        <span></span>
   </div>
    <div class="rightwhiskers four">
         <span></span>
    </div>
    <div class="rightwhiskers five">
         <span></span>
    </div>
    <div class="rightwhiskers six">
          <span></span>
    </div>
</div>
    #head {
    position:absolute;
    top:124px;
    left:130px;
    width:224px;
    height:167px;
    background-color:#FFF;
    border:8px solid #000;
    -moz-border-radius:160px;
    -webkit-border-radius:160px;
    border-radius:160px;
    z-index:500;
    -moz-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    transform:rotate(2deg);
    -webkit-backface-visibility:hidden;
    
}
.lefteye {
    position:absolute;
    top:97px;
    left:45px;
    width:19px;
    height:24px;
    background-color:#000;
    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    border-radius:18px;
}
.righteye {
    position:absolute;
    top:93px;
    left:162px;
    width:19px;
    height:24px;
    background-color:#000;
    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    border-radius:18px;
}
.nose {
    position:absolute;
    top:115px;
    left:100px;
    width:16px;
    height:9px;
    background-color:#FFB827;
    border:6px solid #000;    
    -moz-border-radius:25px;
    -webkit-border-radius:25px;
    border-radius:25px;
}
.leftwhiskers, .rightwhiskers {
    background-color:#000;
}
.one {
    position:absolute;
    top:96px;
    left:-1px;
    width:20px;
    height:9px;
    -moz-border-radius:0 20px 15px 0;
    -webkit-border-radius:0 20px 15px 0;
    border-radius:0 20px 15px 0;
    -moz-transform:rotate(6deg);
    -ms-transform:rotate(6deg);
    -o-transform:rotate(6deg);
    -webkit-transform:rotate(6deg);
}
.one span {
    display:block;
    position:absolute;
    left:-32px;
    top:4px;
    width:33px;
    height:9px;
    background-color:inherit;
    -moz-border-radius: 35px 10px 10px;
    -webkit-border-radius: 35px 10px 10px;
    border-radius: 35px 10px 10px;
    -moz-transform:rotate(-15deg);
    -ms-transform:rotate(-15deg);
    -o-transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);
}
.two {
    position:absolute;
    top:120px;
    left:6px;
    width:15px;
    height:8px;
    -moz-border-radius:10px 20px 13px 10px;
    -webkit-border-radius:10px 20px 13px 10px;
    border-radius:10px 20px 13px 10px;
    -moz-transform:rotate(-15deg);
    -ms-transform:rotate(-15deg);
    -o-transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);
}
.two span {
    display:block;
    position:absolute;
    top:0px;
    left:-24px;
    height:8px;
    width:25px;
    background-color:inherit;
    -moz-border-radius:10px 0 0 15px;
    -webkit-border-radius:10px 0 0 15px;
    border-radius:10px 0 0 15px;
    -moz-transform:rotate(-2deg);
    -ms-transform:rotate(-2deg);
    -o-transform:rotate(-2deg);
    -webkit-transform:rotate(-2deg);
}
.three {
    position:absolute;
    top:138px;
    left:20px;
    width:15px;
    height:8px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-transform:rotate(-16deg);
    -ms-transform:rotate(-16deg);
    -o-transform:rotate(-16deg);
    -webkit-transform:rotate(-16deg);
}
.three span {
    display:block;
    position:absolute;
    top:5px;
    left:-34px;
    width:37px;
    height:8px;
    background-color:inherit;
    -moz-border-radius:18px 10px 12px;
    -webkit-border-radius:18px 10px 12px;
    border-radius:18px 10px 12px;
    -moz-transform:rotate(-19deg);
    -ms-transform:rotate(-19deg);
    -o-transform:rotate(-19deg);
    -webkit-transform:rotate(-19deg);
}
.four {
    position: absolute;
    top: 82px;
    left: 205px;
    width: 25px;
    height: 8px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -moz-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    -o-transform:rotate(-13deg);
    -webkit-transform: rotate(-13deg);    
}
.four span {
    display: block;
    position: absolute;
    top: 3px;
    left: 20px;
    width: 33px;
    height: 8px;
    background-color: inherit;
    -moz-border-radius: 10px 18px 10px 15px;
    -webkit-border-radius: 10px 18px 10px 15px;
    border-radius: 10px 18px 10px 15px;
    -moz-transform: rotate(13deg);
    -ms-transform: rotate(13deg);
    -o-transform:rotate(13deg);
    -webkit-transform: rotate(13deg);
}
.five {
    position: absolute;
    top: 105px;
    left: 211px;    
    width: 22px;
    height: 8px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
.five span {
    display: block;
    position: absolute;
    top: 2px;
    left: 16px;    
    width: 25px;    
    height: 8px;    
    background-color: inherit;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-transform: rotate(11deg);
    -ms-transform: rotate(11deg);
    -o-transform:rotate(11deg);
    -webkit-transform: rotate(11deg);
}
.six {
    position: absolute;
    top: 129px;    
    left: 200px;
    width: 22px;
    height: 8px;
    -moz-border-radius: 20px 10px 10px 18px;
    -webkit-border-radius: 20px 10px 10px 18px;
    border-radius: 20px 10px 10px 18px;
    -moz-transform: rotate(11deg);
    -ms-transform: rotate(11deg);
    -o-transform:rotate(11deg);
    -webkit-transform: rotate(11deg);
}
.six span {
    display: block;
    position: absolute;
    top: 3px;
    left: 18px;
    width: 26px;    
    height: 8px;
    background-color: inherit;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -moz-transform: rotate(13deg);
    -ms-transform: rotate(13deg);
    -o-transform:rotate(13deg);
    -webkit-transform: rotate(13deg);
}

    第二步：耳朵

    右耳画的比较粗糙，原因是因为马上要画个蝴蝶结啊。
    图片描述

    <div id="leftear">
     <span></span>
</div>
<div id="rightear"></div>
    #leftear {
    position:absolute;
    top:-16px;
    left:-3px;
    width:57px;
    height:61px;
    border:8px solid #000;
    border-bottom-color:transparent;
    border-right-color:transparent;
    -moz-border-radius:20px 37px 20px 44px;
    -webkit-border-radius:20px 37px 20px 44px;
    border-radius:20px 37px 20px 44px;
    -moz-transform:rotate(14deg);
    -ms-transform:rotate(14deg);
    -o-transform:rotate(14deg);
    -webkit-transform:rotate(14deg);
    transform:rotate(14deg);
    -webkit-backface-visibility:hidden;
}
#leftear span {
    position:absolute;
    top:2px;
    left:-1px;
    width:68px;
    height:61px;
    background-color:#FFF;
    -moz-border-radius:18px 34px 20px 44px;
    -webkit-border-radius:18px 34px 20px 44px;
    border-radius:18px 34px 20px 44px;
}
#rightear {
    position:absolute;
    top:-27px;
    left:143px;
    width:57px;
    height:61px;
    background-color:#FFF;
    border:8px solid #000;
    border-bottom-color:transparent;
    border-right-color:transparent;
    -moz-border-radius:20px 37px 20px 44px;
    -webkit-border-radius:20px 37px 20px 44px;
    border-radius:20px 37px 20px 44px;
    -moz-transform:rotate(80deg);
    -ms-transform:rotate(80deg);
    -o-transform:rotate(80deg);
    -webkit-transform:rotate(80deg);
    -webkit-backface-visibility:hidden;
}

    第三步：蝴蝶结

    图片描述

    <div id="bow">
    <div class="left"><span></span></div>
    <div class="center"></div>
    <div class="right"><span></span></div>
</div>
    #bow {
    position:absolute;
    top:134px;
    left:141px;
    z-index:1000;
}
.center {
    position:absolute;
    left:140px;
    width:32px;
    height:35px;
    background-color:#F51F27;
    border:8px solid #000;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    z-index:2;
    -moz-transform:rotate(20deg);
    -ms-transform:rotate(20deg);
    -o-transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
}
.left {
    position:absolute;
    top:-33px;
    left:99px;
    width:46px;
    height:62px;
    background-color:#F51F27;
    border:8px solid #000;
    -moz-border-radius: 50px 50px 55px 46px;
    -webkit-border-radius: 50px 50px 55px 46px;
    border-radius: 50px 50px 55px 46px;
    -moz-transform:rotate(19deg);
    -ms-transform:rotate(19deg);
    -o-transform:rotate(19deg);
    -webkit-transform:rotate(19deg);
}
.left span {
    position:absolute;
    top:20px;
    left:23px;
    width:15px;
    height:15px;
    border:6px solid #000;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
}
.right {
    position:absolute;
    top:0;
    left:164px;
    width:43px;
    height:54px;
    background-color:#F51F27;
    border:8px solid #000;
    -moz-border-radius:78px 48px 60px 63px;
    -webkit-border-radius:78px 48px 60px 63px;
    border-radius:78px 48px 60px 63px;
    -moz-transform:rotate(22deg);
    -ms-transform:rotate(22deg);
    -o-transform:rotate(22deg);
    -webkit-transform:rotate(22deg);
}
.right span {
    position:absolute;
    top:18px;
    left:1px;
    width:15px;
    height:12px;
    border:6px solid #000;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
}

    第四步：身体

    经过前几次的学习之后，画身体应该没什么难度了吧，都是用各种形状的圆组成的。
    图片描述

    <div id="body">
     <div id="leftarm"><span></span></div>
     <div id="rightarm"><span></span></div>
     <div id="torso">
          <span class="leftshort"></span>
          <span class="rightshort"></span>
          <div class="crotch"></div>
     </div>
     <div id="chest"></div>
     <div id="leftleg"></div>
     <div id="rightleg"></div>
</div>
    #body {
    position:absolute;
    top:295px;
    width:250px;
    height:150px;    
}
#leftarm {
    position:absolute;
    top:-8px;
    left:142px;
    width:40px;
    height:73px;    
    background-color:#FFF;
    border:8px solid #000;
    -moz-border-radius:158px 0 82px 100px;
    -webkit-border-radius:158px 0 82px 100px;
    border-radius:158px 0 82px 100px;
    overflow:hidden;
    -moz-transform:rotate(28deg);
    -ms-transform:rotate(28deg);
    -o-transform:rotate(28deg);
    -webkit-transform:rotate(28deg);
    -webkit-backface-visibility:hidden;
}
#leftarm span {
    position:absolute;
    top:-3px;
    left:1px;
    width:50px;
    height:38px;
    background-color:pink;
    border-bottom:8px solid #000; 
    -webkit-border-top-left-radius: 200px;
    -moz-border-radius-topleft: 200px;
    border-top-left-radius:200px;
    -moz-transform:rotate(6deg);
    -ms-transform:rotate(6deg);
    -o-transform:rotate(6deg);
    -webkit-transform:rotate(6deg);
}
#rightarm {
    position:absolute;
    top: -4px;
    left: 302px;
    height: 70px;
    width: 40px;
    background-color:#FFF;
    border: 8px solid #000;
    -moz-border-radius: 0 158px 100px 81px;
    -webkit-border-radius: 0 158px 100px 81px;
    border-radius: 0 158px 100px 81px;
    overflow: hidden; 
    -moz-transform: rotate(-28deg);
    -ms-transform: rotate(-28deg);
    -o-transform:rotate(-28deg);
    -webkit-transform: rotate(-28deg);
    -webkit-backface-visibility:hidden;
}
#rightarm span {
    position:absolute;
    top:-2px;
    left:-4px;
    width:41px;
    height:36px;
    background-color:pink;
    border-bottom:8px solid #000;
    -webkit-border-top-right-radius: 200px;
    -moz-border-radius-topright: 200px;
    border-top-right-radius:200px;
    -moz-transform:rotate(-9deg);
    -ms-transform:rotate(-9deg);
    -o-transform:rotate(-9deg);
    -webkit-transform:rotate(-9deg);
}
#chest {
    position: absolute;
    top: -32px;    
    left: 213px;
    width: 58px;
    height: 54px;
    background-color:pink;
    border: 8px solid #000;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
#torso {
    position:absolute;
    top:-10px;
    left:165px;
    width:154px;
    height:105px;
    background-color:#F51F27;
    border: 8px solid #000;
    -moz-border-radius: 110px 110px 0 0;
    -webkit-border-radius: 110px 110px 0 0;
    border-radius: 110px 110px 0 0;
    border-bottom:none;
}
#torso .leftshort {
    display:block;
    position:absolute;
    top:92px;
    left:-8px;
    width:73px;
    height:14px;
    background-color:#F51F27;
    border-bottom:8px solid #000;
    border-left:8px solid #000;
    -moz-border-radius:1px 3px 0 30px;
    -webkit-border-radius:1px 3px 0 30px;
    border-radius:1px 3px 0 30px;
    z-index:3;
    -moz-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
}
#torso .rightshort {
    display:block;
    position:absolute;
    top:97px;
    right:-8px;
    width:73px;
    height:8px;
    background-color:#F51F27;
    border-bottom:8px solid #000;
    border-right:8px solid #000;
    -moz-border-radius:3px 1px 30px 0;
    -webkit-border-radius:3px 1px 30px 0;
    border-radius:3px 1px 30px 0;
    z-index:3;
    -moz-transform:rotate(-2deg);
    -ms-transform:rotate(-2deg);
    -o-transform:rotate(-2deg);
    -webkit-transform:rotate(-2deg);
}
.crotch {
    position:absolute;
    bottom:-6px;
    left:71px;
    width:12px;
    height:12px;
    background-color:#000;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
}
#leftleg {
    position:absolute;
    top:100px;
    left:165px;
    width:73px;
    height:34px;
    background-color:#FFF;
    border:8px solid #000;
    -moz-border-radius:0 15px 25px 35px;
    -webkit-border-radius:0 15px 25px 35px;
    border-radius:0 15px 25px 35px;
}
#rightleg {
    position:absolute;
    top:100px;
    left:246px;
    width:73px;
    height:34px;
    background-color:#fff;
    border: 8px solid #000;
    -moz-border-radius:15px 0 35px 25px;
    -webkit-border-radius:15px 0 35px 25px;
    border-radius:15px 0 35px 25px;
}

    收工

    图片描述

    欢迎大家吐槽

    htmlhtml5csscss3前端
    本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议
    二次元的CSS
    用div+css3画一些动漫人物
    avatar

    360的小前端一枚

    378 声望
    158 粉丝
    0 条评论
    得票最新
    推荐阅读
    用CSS3做各种样式的饼图
    以前一直用highcharts做饼图的效果，但有时候，一些比较简单的饼图用highcharts的话有点杀鸡用牛刀的感觉。所以自己研究了一下如何用css3来达到这个效果。并封装了一下，支持多种样式，写了一个 pie.js 。

    lancer07赞 5阅读 15.2k评论 5

    正则表达式实例
    收集在业务中经常使用的正则表达式实例，方便以后进行查找，减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合，不能使用特殊...

    寒青赞 54阅读 7.8k评论 11

    JavaScript有用的代码片段和trick
    平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意：前三种方法只适用于32个位整数，对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

    jenemy赞 46阅读 5.9k评论 12

    从零搭建 Node.js 企业级 Web 服务器（十五）：总结与展望
    总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了，回顾第零章曾写道：搭建一个 Node.js 企业级 Web 服务器并非难事，只是必须做好几个关键事项这几件必须做好的关键事项就...

    乌柏木赞 66阅读 6.1k评论 16

    再也不学AJAX了！（二）使用AJAX ① XMLHttpRequest
    「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章，希望读者通过阅读本系列文章，能够对 AJAX 技术有更加深入的认识和理解，从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇，最近更新于 2023 年 1...

    libinfs赞 39阅读 6.3k评论 12

    封面图
    从零搭建 Node.js 企业级 Web 服务器（一）：接口与分层
    分层规范从本章起，正式进入企业级 Web 服务器核心内容。通常，一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的，如下图：从上至下，抽象层次逐渐加深。从下至上，业务细节逐渐清晰。视图...

    乌柏木赞 43阅读 7.3k评论 6

    CSS 绘制一只思否猫
    欢迎关注我的公众号：前端侦探练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只思否猫？思否猫，SegmentFault 思否的吉祥物，是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

    XboxYan赞 43阅读 2.9k评论 14

    封面图
    avatar

    360的小前端一枚

    378 声望
    158 粉丝
    宣传栏
    223