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

WBOY
發布: 2016-06-24 11:31:33
原創
1289 人瀏覽過

接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫。

(PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录下学习的过程)

 

这次就不多说CSS属性的基础概念了。 说说我画的过程吧, 好,进入正题。

 

因为和之前的瞎画不同,这次是画现有的东西。我认为临摹是比较简单的。 我先上网找了下要临摹的对象,找了个最中规中矩的图片,如下:

 

这对我来说不是一个简单的任务, 而我处理不简单的任务的解决方案,就是把他拆分再拆分,一直拆到问题无法再拆且可以解决为止。

 

拆分结果如下:

1. 头

  1.1 眼睛

  1.2 脸廓

  1.3 鼻子

  1.4 胡须

  1.5 嘴唇

  1.6 嘴巴

    1.6.1 口腔

    1.6.2 舌头 

2. 身子

  2.1 项圈

  2.2 铃铛

  2.3 躯干

  2.4 肚兜

  2.5 百宝袋

  2.6 双手

    2.6.1 手臂

    2.6.2 拳头

  2.7 双脚

    2.7.1 腿

    2.7.2 脚掌

 

这个画我无法一次性完成,最新的效果可以在这里看到: Demo

代码在这: https://github.com/bee0060/Css-Paint   

(请根据关键字carton、doraemon找相应的文件)

 

之后我会陆续更新这幅画,有些进展之后会记录在该篇博客中。

 

--------------------------------------------------------------------------   2015.12.24 start   --------------------------------------------------------------------------

到目前为止, 完成了小叮当的头部。 看了效果的会发现,下巴处看起来不对, 没关系,等我加上他的围脖后,就能遮挡住这块不对劲的地方了。

 

这个画画了快一个月,才把头画完,主要是因为懒,三天打鱼两天晒网,其次也在中途遇到几个难点,差点因为这些难点放弃了。

其中最难的要数嘴唇和嘴唇两边的类似半圆形(我叫它们做“嘴唇左边”和“嘴唇右边”), 其中需要曲线、半圆、倾斜、遮盖来完成。其中最难处理的是曲线,解决了曲线问题后,就比较顺利的完成了后续的画。

 

嘴唇左边: 这里用了一个半圆加上一定的倾斜实现。但实现之初,半圆会突出到胡子的区域,我就给胡子的容器设置白色背景色,将突出到胡子区域的嘴唇左边部分遮盖。

嘴唇:     因为嘴唇是先向下凸,再向上,又向下的曲线,这里由3个圆角来拼接成这样的曲线,这里做曲线的时间是最长的,遇到的问题和解决方案在下面细说。

嘴唇右边:这里和嘴唇左边采取相同的方法。 只是圆角的角度不相同。

 

曲线:    我是用圆角来实现曲线的,相信很多人都是这么处理的。但是圆角有个问题,如果只有一面有边框(例如left),且设置圆角,这个边框会在末端慢慢变细,这会影响呈现效果。

    我的解决方案是,增加一层容器, 再给容器设置overflow:none, 然后真正拥有圆角边框的对象在容器内, 然后调整容器和圆角对象的大小,让边框变细的部分超出容易,以此隐藏掉变细的部分。

 

画这幅画的过程一点也不优雅, 我无法通过数学的方式优雅的计算出每个对象的位置,每个圆角的弧度,每个倾斜的角度。 我采用最低级的方法, 在chrome中,选中元素并不断调整各种css属性,最终实现现在的效果。 所以这么做非常低效。 如果各位有什么好的工具或方法, 请不吝赐教。 在此先谢过。

 

到目前为止,只完成了头部, 之后(应该)会陆续完善直至完成。

 

谢谢观看。另外,圣诞快乐。

--------------------------------------------------------------------------   2015.12.24 end   --------------------------------------------------------------------------

 

 

未完待续......

  

 

有任何问题或意见,欢迎交流。

如果发现本文有什么问题(如错别字),请不吝告知,谢谢。

 

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板