整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

用CSS3实现一个动态的小黄人

用CSS3实现一个动态的小黄人

近在网上看到有人用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.小黄人的头发可以用什么标签表示?

你以为行了?

疑问三连

  • 1.position中,小黄人使用的定位使用的定位是absolute,fixed,relative,static,inherit其中的那个?
  • 2.container {}中,padding margin display perspective perspective-origin中的透视图作用?
  • .goggle-frame可以分为几部分?

评论区:

张三:这也太难了?

李四:太难了?不想学?UPWork /h到/h不等,你需要的Web Developer都有。网址如下:

https://www.upwork.com.