[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 ...
随机推荐
- Microsoft Build 2015 汇总
简要概括(GitHub 完成约 45%): Visual Studio Code Preview(意料之外) Visual Studio 2015 RC Visual Studio 2013 Upda ...
- h5直播开发之旅总结
前言 关于直播,有很多相关技术文章,这里不多说. 作为前端,我们比较关心我们所需要的. 直播的大致流程: APP端调用摄像头 -> 拍摄视频 -> 实时上传视频 -> 服务器端获取视 ...
- 使用yield进行异步流程控制
现状 目前我们对异步回调的解决方案有这么几种:回调,deferred/promise和事件触发.回调的方式自不必说,需要硬编码调用,而且有可能会出现复杂的嵌套关系,造成"回调黑洞" ...
- ros::spin() 和 ros::spinOnce() 区别及详解
版权声明:本文为博主原创文章,转载请标明出处: http://www.cnblogs.com/liu-fa/p/5925381.html 博主提示:本文基于ROS Kinetic Kame,如有更(g ...
- CCF——Z字形扫描问题
试题编号: 201412-2 试题名称: Z字形扫描 时间限制: 2.0s 内存限制: 256.0MB 问题描述: 问题描述 在图像编码的算法中,需要将一个给定的方形矩阵进行Z字形扫描(Zigzag ...
- JavaScript的作用域和块级作用域概念理解
作用域 作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期.说到这里我们需要理解两个概念:块级作用域与函数作用域. 函数作用域 这个应该好理解,函数作用域就是说定义在 ...
- 自己封装的一个LoadRes组件
这两周一直太忙,没有好好处理上上上周遇到的一个让我加班到凌晨的问题,这个问题是判断flash的加载. 之前的思路是让flash的人在制作flash的时候,加入了一个回调方法,该方法再会回调我页面的方法 ...
- SQL Server 存储过程遇到“表 '#TT' 没有标识属性。无法执行 SET 操作”错误
创建临时表,往临时表插入数据的时候报的错误. 一开始提示没有打开主键,后来打开主键就提示上述错误异常. 从网上查找资料没有找到,然后又到群里问各位大牛,一位大牛告诉我是没有设置主键. 我又仔细看看提示 ...
- .net源码分析 – List<T>
通过分析源码可以更好理解List<T>的工作方式,帮助我们写出更稳定的代码. List<T>源码地址: https://github.com/dotnet/corefx/blo ...
- NoSQL
Not Only Sql,弱一致性模型,非关系型.分布式.支持水平扩展的数据库设计模式,区别于传统关系型数据库严格的事务一致性和范式约束.分布式缓存是NoSQL一种实现形式. 参考: