近在网上看到有人用CSS3写了一个可爱的小黄人,就自己也试试看,下面是代码,大家可以看看效果,很好玩。纯属娱乐!注:不兼容ie9以下浏览器。
效果图:
代码如下
html结构代码:
css样式代码(样式有点多,需要代码的可以私聊我!):
如果内心明显感觉不安,就不要看了。
3.Eyes and Goaale护目镜。Eyes由巩膜sclera,瞳&孔pupil组成。在HTMl中,都用<div class=""></div>表示。CSS中从goggle-strap护目镜带,goggle-frame护目镜架,.eye{}.pupil{}.dot{}等方面。去掉<div class="goggle-frame left">后成这样,goggle-strap
link是→去掉<div class="goggle-frame left">后成这样,goggle-strap link是→
4.Mouth。<div class="mouth"></div>一行搞定,$mouth-width:60px;锁定嘴巴宽度,top left margin-left height 定位;border边框 bottom底 radius半径 shadow影子 都在.mouth{ }标签下面。
5. dungarees。front前面 pocket口袋strap带子,数条<div class=""></div>整个包含在<div class="minion-body"></div>中。
6.LOGO。LOGO整体在minion-bod的class,<div class="logo"><span></span></div>中的<span></span>标签巧妙地将logo切分。
7.wrist。<div class="wrist back left"></div>注意区分front和back。
如果明显感到不适,就不要看了。
人生苦短,勤勤恳恳是唯一答案。
测试三连?
1.整个小黄人包含在div的container中,请写出container的div标签;
2.container类的div标签,包含一个minion类,请写出minion的div标签中;
3.小黄人的头发可以用什么标签表示?
你以为行了?
疑问三连
张三:这也太难了?
李四:太难了?不想学?UPWork /h到/h不等,你需要的Web Developer都有。网址如下:
https://www.upwork.com.
*请认真填写需求信息,我们会在24小时内与您取得联系。