[css]我要用css画幅画(八)

接着之前的[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

最新文章

热门文章