[css]我要用css画幅画(八) - Hello Kitty
接着之前的[css]我要用css画幅画(七) - 哆啦A梦，这次画的是Hello Kitty。
/*
开始前先说点废话， 一转眼就2016年了，过完年后一直没更新博客，无他，就是懒得动。 这一转眼，一年就过了1/4多了。 现在依然处在迷茫状态，时间一直浪费下去也是白浪费，在找到新的目标前，暂时先继续之前做的事吧，免得时间过了又觉得可惜。 */
一点个人牢骚，可忽略
这个hello kitty画下来，非常拖沓，慢慢调样式实在太沉闷了，而且感觉只是在重复自己，所以没啥动力继续。
这次的hello kitty比哆啦A梦简单很多，本身是可以很快就完成的。 不过由于没啥动力， 画的慢，而且也粗糙。
反正终于是完成了， 先发出来， 以后有动力再调整吧。
Github Demo：http://bee0060.github.io/Css-Paint/pages/carton/hello-kitty.html
Code Pen Demo: http://codepen.io/bee0060/pen/YqePNr
代码：https://github.com/bee0060/Css-Paint
这次要临摹的图片如下：
因为哆啦A梦的经验，这次已经感觉并不困难，而且发现哆啦A梦的CSS中有部分样式可以重用， 于是我把这些样式抽出来做成公用样式，并引用进来，公用样式如下：
/*位置选择器*/
.clearfix {
clear: both;
} .pos-a {
position: absolute;
} .pos-r {
position: relative;
} .pull-left {
float: left;
} .pull-right {
float: right;
} .m-hoz-auto {
margin-left: auto;
margin-right: auto;
} .left-32 {
left: 32px;
} .left-5 {
left: 5px;
} .top-30 {
top: 30px;
} /*形状选择器*/
.circle {
border-radius: 50%;
} /*样式选择器*/
.bacc-white {
background-color: white;
} .bacc-black {
background-color: black;
} .bacc-blue {
background-color: rgb(2, 159, 227);
} .bacc-brown-red {
background-color: rgb(216, 5, 23);
} .bacc-mouse-red {
background-color: #E80115;
} .bacc-mouse-orange {
background-color: #EF6C1C;
} .bacc-bell-yellow {
background-color: #F5D600;
} .border-black-1 {
border: 1px solid black;
} .border-black-2 {
border: 2px solid black;
} .border-black-3 {
border: 3px solid black;
} .oh {
overflow: hidden;
}
common.css
其中有小部分可重用，部分样式就不需要重新写了。 之前颗粒化的写样式，为这次的画带来了一点便利。 但我也感觉到，要让css的重用率更高，还需要更多思考和实践，目前的效果还不算好。
这次画的策略主要是用颜色的遮盖，例如身体，实现步骤如下：
1. 先画一个纯黑的身体形状
<div class="pos-r">
<div class="body-left pos-r pull-left"></div>
<div class="body-right pos-r pull-left"></div>
</div>
html
.body-left {
background-color: #000;
border: 12px solid #000;
border-top-left-radius: 90% 100%;
border-bottom-left-radius: 70% 50%;
border-bottom-right-radius: 60% 20%;
height: 240px;
margin-left: 125px;
margin-top: -43px;
width: 135px;
z-index:;
}
.body-right {
background-color: #000;
border: 12px solid #000;
border-top-right-radius: 100% 90%;
border-bottom-left-radius: 60% 20%;
border-bottom-right-radius: 70% 50%;
height: 240px;
margin-left: -46px;
margin-top: -43px;
width: 135px;
z-index:;
}
css
2. 画粉红色的T恤盖上去
<div class="pos-r">
<div class="shirt-left pos-r pull-left">
</div>
<div class="shirt-right pos-r pull-left">
</div>
</div>
html
.shirt-left {
background-color: rgb(250, 167, 209);
border-top-left-radius: 100% 100%;
border-bottom-left-radius: 70% 50%;
border-bottom-right-radius: 60% 20%;
height: 240px;
margin-left: 140px;
margin-top: -254px;
width: 135px;
z-index:;
}
.shirt-right {
background-color: rgb(250, 167, 209);
border-top-right-radius: 115% 105%;
border-bottom-left-radius: 60% 20%;
border-bottom-right-radius: 70% 50%;
height: 240px;
margin-left: 245px;
margin-top: -254px;
width: 135px;
z-index:;
}
css
3. 画桃红色的领口盖上去
<div class="neck pos-r"></div>
html
.neck {
background-color: rgb(245, 74, 153);
border: 12px solid #000;
border-radius: 50%;
height: 110px;
margin-left: 195px;
margin-top: -72px;
width: 100px;
z-index:;
}
css
4. 画白色的双脚盖上去(为了遮盖，放在了右边T恤的div里）
<div class="shirt-right pos-r pull-left">
<div class="feet-left pos-a pull-left"></div>
<div class="feet-right pos-a pull-left"></div>
</div>
html
.feet-left {
background-color: white;
border: 12px solid #000;
border-bottom-left-radius: 60% 100%;
border-bottom-right-radius: 30% 50%;
height: 60px;
margin-left: -118px;
margin-top: 170px;
width: 115px;
z-index:;
}
.feet-right {
background-color: white;
border: 12px solid #000;
border-bottom-left-radius: 30% 50%;
border-bottom-right-radius: 60% 100%;
height: 60px;
margin-left: 10px;
margin-top: 170px;
width: 115px;
z-index:;
}
css
命名也遵照之前的规则，每个组件的命名都尽量可读。
这次画出来的比较粗糙， 和原图的区别还是比较明显的， 希望不会恶心到观众。 哈哈。
关键html:
<div class="container pos-r pull-left">
<div class="ear-left pos-a pull-left"></div>
<div class="ear-right pos-a pull-left"></div>
<div class="flower pos-a">
<div class="leaf leaf-1 pos-a"></div>
<div class="leaf leaf-2 pos-a"></div>
<div class="leaf leaf-3 pos-a"></div>
<div class="leaf leaf-4 pos-a"></div>
<div class="leaf leaf-5 pos-a"></div>
<div class="flower-center pos-a">
<div class="flower-heart"></div>
</div>
</div>
<div class="head pos-r">
<div class="eye eye-left pos-a"></div>
<div class="eye eye-right pos-a"></div>
<div class="nose pos-r"></div>
<div class="bread-left-1 pos-a oh">
<div class="bread-left-1-inside"></div>
</div>
<div class="bread-left-2 pos-a oh">
<div class="bread-left-2-inside"></div>
</div>
<div class="bread-left-3 pos-a oh">
<div class="bread-left-3-inside"></div>
</div>
<div class="bread-right-1 pos-a oh">
<div class="bread-right-1-inside"></div>
</div>
<div class="bread-right-2 pos-a oh">
<div class="bread-right-2-inside"></div>
</div>
<div class="bread-right-3 pos-a oh">
<div class="bread-right-3-inside"></div>
</div>
</div>
<div class="pos-r">
<div class="body-left pos-r pull-left"></div>
<div class="body-right pos-r pull-left"></div>
</div>
<div class="neck pos-r"></div>
<div class="pos-r">
<div class="shirt-left pos-r pull-left">
</div>
<div class="shirt-right pos-r pull-left">
<div class="feet-left pos-a pull-left"></div>
<div class="feet-right pos-a pull-left"></div>
</div>
</div>
<div class="left-hand pos-a">
<div class="left-arm-shirt"></div>
<div class="left-finger">
<div class="left-finger-inside"></div>
</div>
</div>
<div class="right-hand pos-a">
<div class="right-arm-shirt"></div>
<div class="right-finger">
<div class="right-finger-inside"></div>
</div>
</div>
</div>
关键css：
/*卡通组件*/
.container {
height: 700px;
width: 600px;
} .ear-left {
border:15px solid #000;
border-top-left-radius: 30%;
border-top-right-radius: 100%;
border-bottom-left-radius: 90%;
height: 130px;
margin-top: 42px;
margin-left: 80px;
width: 130px; z-index:;
-webkit-transform: rotate(5deg);
-webkit-transform-origin: left top;
} .ear-right {
border:15px solid #000;
border-top-left-radius: 80% 65% ;
border-top-right-radius: 15%;
border-bottom-right-radius: 25% 95%;
height: 100px;
margin-top: 30px;
margin-left: 255px;
width: 130px; z-index:;
-webkit-transform: rotate(-10deg);
-webkit-transform-origin: right top;
} .flower {
margin-top: -8px;
margin-left: 230px;
} .leaf {
background-color: rgb(245, 74, 153);
border: 12px solid #000;
border-top-left-radius: 40px 45px;
border-top-right-radius: 40px 45px;
width: 40px; border-bottom-color: rgb(245, 74, 153);
z-index:;
} .leaf-1 {
height: 55px;
margin-left: 9px;
margin-top: 17px;
-webkit-transform: rotate(-30deg);
} .leaf-2 {
height: 50px;
margin-left: 84px;
margin-top: 30px;
-webkit-transform: rotate(50deg);
} .leaf-3 {
height: 45px;
margin-left: 89px;
margin-top: 98px;
-webkit-transform: rotate(120deg);
} .leaf-4 {
height: 45px;
margin-left: 30px;
margin-top: 125px;
-webkit-transform: rotate(190deg);
} .leaf-5 {
height: 50px;
margin-left: -18px;
margin-top: 78px;
width: 40px;
-webkit-transform: rotate(-105deg);
} .flower-center {
background-color: rgb(245, 74, 153);
border-radius: 50%;
height: 82px;
margin-top: 64px;
margin-left: 21px;
width: 95px;
z-index:;
} .flower-heart {
background-color: rgb(245, 180, 4);
border: 9px solid #000;
border-radius: 50%;
height: 23px;
margin: 20px 25px;
width: 23px;
} .head{
background-color: #fff;
border: 15px solid #000;
border-top-left-radius: 50% 60%;
border-top-right-radius: 50% 60%;
border-bottom-left-radius: 51% 48%;
border-bottom-right-radius: 51% 48%; height: 260px;
margin-top: 60px;
margin-left: 60px;
width: 355px; z-index:;
} .eye {
background-color: #000;
border-radius: 50%;
height: 40px;
width: 30px;
} .eye-left {
margin-top: 125px;
margin-left: 70px;
} .eye-right {
margin-top: 125px;
margin-left: 250px;
} .nose {
background-color: rgb(245, 180, 4);
border: 8px solid #000;
border-radius: 50%;
height: 18px;
left: -20px;
margin-top: 165px;
margin-left: 50%;
top: 10px;
width: 30px;
} .bread-left-1 {
border: 0px solid #fff;
border-radius: 50%;
margin-top: -75px;
margin-left:-70px;
height: 15px;
width: 95px; -webkit-transform: rotate(5deg);
-webkit-transform-origin: right top;
} .bread-left-1-inside {
border: 12px solid #000;
border-radius: 50%;
height: 70px;
margin-left:-70px;
width: 205px;
} .bread-left-2 {
border: 0px solid #fff;
border-radius: 50%;
margin-top: -43px;
margin-left:-60px;
height: 15px;
width: 77px; -webkit-transform: rotate(-5deg);
-webkit-transform-origin: right top;
} .bread-left-2-inside {
border: 12px solid #000;
border-radius: 50%;
height: 70px;
margin-left:-70px;
width: 205px;
} .bread-left-3 {
border: 0px solid #fff;
border-radius: 50%;
margin-top: -15px;
margin-left:-50px;
height: 15px;
width: 78px; -webkit-transform: rotate(-19deg);
-webkit-transform-origin: right top;
} .bread-left-3-inside {
border: 12px solid #000;
border-radius: 50%;
height: 70px;
margin-left:-70px;
width: 205px;
} .bread-right-1 {
border: 0px solid #fff;
border-radius: 50%;
margin-top: -80px;
margin-left:325px;
height: 15px;
width: 95px; -webkit-transform: rotate(-5deg);
-webkit-transform-origin: left top;
} .bread-right-1-inside {
border: 12px solid #000;
border-radius: 50%;
height: 70px;
margin-left:-70px;
width: 205px;
} .bread-right-2 {
border: 0px solid #fff;
border-radius: 50%;
margin-top: -48px;
margin-left:332px;
height: 15px;
width: 72px; -webkit-transform: rotate(4deg);
-webkit-transform-origin: left top;
} .bread-right-2-inside {
border: 12px solid #000;
border-radius: 50%;
height: 70px;
margin-left:-70px;
width: 205px;
} .bread-right-3 {
border: 0px solid #fff;
border-radius: 50%;
margin-top: -14px;
margin-left:325px;
height: 15px;
width: 80px; -webkit-transform: rotate(19deg);
-webkit-transform-origin: left top;
} .bread-right-3-inside {
border: 12px solid #000;
border-radius: 50%;
height: 70px;
margin-left:-70px;
width: 205px;
} .body-left {
background-color: #000;
border: 12px solid #000;
border-top-left-radius: 90% 100%;
border-bottom-left-radius: 70% 50%;
border-bottom-right-radius: 60% 20%; height: 240px;
margin-left: 125px;
margin-top: -43px;
width: 135px;
z-index:;
} .body-right {
background-color: #000;
border: 12px solid #000;
border-top-right-radius: 100% 90%;
border-bottom-left-radius: 60% 20%;
border-bottom-right-radius: 70% 50%; height: 240px;
margin-left: -46px;
margin-top: -43px;
width: 135px;
z-index:;
} .neck {
background-color: rgb(245, 74, 153);
border: 12px solid #000;
border-radius: 50%; height: 110px;
margin-left: 195px;
margin-top: -72px;
width: 100px;
z-index:;
} .shirt-left {
background-color: rgb(250, 167, 209);
border-top-left-radius: 100% 100%;
border-bottom-left-radius: 70% 50%;
border-bottom-right-radius: 60% 20%; height: 240px;
margin-left: 140px;
margin-top: -254px;
width: 135px;
z-index:;
} .shirt-right {
background-color: rgb(250, 167, 209);
border-top-right-radius: 115% 105%;
border-bottom-left-radius: 60% 20%;
border-bottom-right-radius: 70% 50%; height: 240px;
margin-left: 245px;
margin-top: -254px;
width: 135px;
z-index:;
} .feet-left {
background-color: white;
border: 12px solid #000;
border-bottom-left-radius: 60% 100%;
border-bottom-right-radius: 30% 50%; height: 60px;
margin-left: -118px;
margin-top: 170px;
width: 115px;
z-index:;
} .feet-right {
background-color: white;
border: 12px solid #000;
border-bottom-left-radius: 30% 50%;
border-bottom-right-radius: 60% 100%; height: 60px;
margin-left: 10px;
margin-top: 170px;
width: 115px;
z-index:;
} .left-hand {
background-color: white;
border: 12px solid #000; border-radius: 50%; height: 70px;
margin-left: 45px;
margin-top: -30px;
width: 125px;
z-index:; -webkit-transform: rotate(-30deg);
-webkit-transform-origin: left top;
} .left-arm-shirt{
background-color: rgb(245, 74, 153);
border: 12px solid #000;
border-radius: 50%;
border-top-left-radius: 0%;
border-top-right-radius: 100% 60%; height: 70px;
margin-left: 57px;
margin-top: -7px;
width: 60px;
z-index:;
} .left-finger {
height: 32px;
margin-left: -2px;
margin-top: -103px;
overflow: hidden;
width: 50px; -webkit-transform: rotate(-18deg);
-webkit-transform-origin: left top;
} .left-finger-inside {
background-color: white;
border: 12px solid #000;
border-radius: 50%;
height: 30px;
margin-top: 6px;
width: 25px;
z-index:;
} .right-hand {
background-color: white;
border: 12px solid #000; border-radius: 50%; height: 70px;
margin-left: 320px;
margin-top: -37px;
width: 125px;
z-index:; -webkit-transform: rotate(28deg);
-webkit-transform-origin: right top;
} .right-arm-shirt{
background-color: rgb(245, 74, 153);
border: 12px solid #000;
border-radius: 50%;
border-top-right-radius: 0%;
border-top-left-radius: 100% 60%; height: 70px;
margin-left: -15px;
margin-top: -7px;
width: 60px;
z-index:;
} .right-finger {
height: 32px;
margin-left: 78px;
margin-top: -103px;
overflow: hidden;
width: 50px; -webkit-transform: rotate(18deg);
-webkit-transform-origin: right top;
} .right-finger-inside {
background-color: white;
border: 12px solid #000;
border-radius: 50%;
height: 30px;
margin-top: 6px;
width: 25px;
z-index:;
}
Github Demo：http://bee0060.github.io/Css-Paint/pages/carton/hello-kitty.html
CodePen Demo: http://codepen.io/bee0060/pen/YqePNr
代码：https://github.com/bee0060/Css-Paint
有任何问题或意见，欢迎交流。
如果发现本文有什么问题（如错别字），请不吝告知，谢谢。
这次的博客可能有点滥竽充数，请见谅。希望短期内能想到其他有意思的东西来打发时间。：）
转载请注明出处：[css]我要用css画幅画(八) - Hello Kitty
[css]我要用css画幅画(八) - Hello Kitty的更多相关文章
- [css]我要用css画幅画(九) - Apple Logo
接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- [css]我要用css画幅画(六)
接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧. 本次的更新包括: 1. 给云增加动画 2. 画了一棵树 3. 树上画了一个 ...
- [css]我要用css画幅画(五)
接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码 ...
- [css]我要用css画幅画(四)
接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...
- [css]我要用css画幅画(三)
接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...
- [css]我要用css画幅画(二)
接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是 ...
- [css]我要用css画幅画(一)
几年前开始就一直想用css画幅画. 今天才真正开始, 从简单的开始. 作为一个工作压力那么大的程序员,我首先要画一个太阳. html如下: <!DOCTYPE html> <html ...
- 【html、CSS、javascript-5】css应用场景补充
一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...
随机推荐
- Objective-C中的属性机制
Objective-C 2.0中的属性机制为我们提供了便捷的获取和设置实例变量的方式,也可以说属性为我们提供了一个默认的设置器和访问器的实现.在学习OC中属性之前我们先要知道为什么要为变量实现gett ...
- ASP.NET实现微信功能（1）（创建菜单，验证，给菜单添加事件）
LZ实在 不知道怎么起名字了,索性就取了这个名字,开始吧,说实在的,想给自己的平常的学习做一个总结,总是忘了总结.也只能给工作做一个总结了. 我打算用2篇文章来写,第一篇是关于订阅号的,就是这个号,另 ...
- APP接口自动化测试JAVA+TestNG(二)之TestNG简介与基础实例
前言 继上篇环境篇后,本篇主要对TestNG进行介绍,给出最最基础的两个实例,通过本文后,学会并掌握TestNG测试用例的编写与运行,以及生成美化后的报告.下一篇为HTTP接口实战(国家气象局接口自动 ...
- .NET环境下基于RBAC的访问控制
.NET环境下基于RBAC的访问控制 Access Control of Application Based on RBAC model in .NET Environment 摘 要:本文从目前信息 ...
- RECONFIGURE语句会清空计划缓存么？
几个星期前,有个网友问我一个非常有趣的问题:RECONFIGURE语句会清空计划缓存么?通常我对这个问题的答案是简单的是,但慢慢的我找出了真正的答案是“看情况啦”.我们来看下它,为什么“它看情况”. ...
- Sublime Text 使用介绍、全套快捷键及插件推荐
开篇:如果说Notepad++是一款不错Code神器,那么Sublime Text应当称得上是神器滴哥.Sublime Text最大的优点就是跨平台,Mac和Windows均可完美使用:其次是强大的插 ...
- WebSocket in ASP.NET Core
一.WebSocket WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算) 首先HTTP有1.1和1.0 ...
- Xamarin.Android和UWP之MVVM的简单使用(一)
0x01 前言 就目前而言,MVVM可以说是挺流行的,无论是web端还是移动端,web端的主要代表angularjs,avalonjs等, 移动端(xamarin,uwp)的代表应该是mvvmligh ...
- 在 .NET 中远程请求 https 内容时，发生错误：根据验证过程，远程证书无效。
当访问 https 内容的时候,有时候经常会看到证书错误(不在操作系统的证书信任链中?)的提示,在浏览器中我们可以忽略错误的证书,继续访问网页内容. 但是在 .NET 程序中,需要由代码来判断是否忽略 ...
- 离线安装swashbuckle(webapi自动文档及测试工具)
1.找到已经成功安装过的项目根目录的packages文件夹拷贝到新的项目的根目录 2.vs设置nuget程序包源 将源:地址改为新项目的packages文件夹 3.重新编译并修改代码 右键项目-> ...