【二次元的CSS】—— 用 DIV + CSS3 画Hello Kitty(详解步骤)
原本自己也想画Hello Kitty,正巧看到一位外国友人Lauren McConachie(她的个人网站: http://lorenai.com。)也用相同的方法画了。 且细节相当到位。在此我也分享一下。(出于尊重原作者的目的,CSS我就不修改了)
第一步:从头说起
难点是胡须,因为胡须有点弯的,所以每根胡须需要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;
}
收工
欢迎大家吐槽
二次元的CSS
用div+css3画一些动漫人物
推荐阅读
用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 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^<...
XboxYan赞 43阅读 2.9k评论 14
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。