最近一直在整理 CSS 的应用,恰好在前几天看到来自 @郭锦荣 分享的小黄人 CSS 代码,也自己折腾验证了,转载分享一下。实现效果可以浏览:Minions

首先是HTML部分的结构

当然结构清晰了,后面再来理解class的描述就非常好理解,我们继续看下去。

 

 作者说:

1.我把裤子放在身体里面,然后给.bodyH添加overflow:hidden,这样我们就不用去多虑溢出怎么办,而且很轻松就能实现裤子的效果;

2.可以看到裤子两边有两条有弧度的曲线段,我是通过给矩形某一个角实现圆角效果,然后只设置与这个角相邻的两条边的边框样式,然后旋转一下角度就实现这个效果了,当然只能实现简单一点的效果。

 

 

作者说:

1.头发:头发我想实现的是被小风轻轻地吹起来,然后很快就塌下去,所以吹起和下塌分配的时间很关键;

2.眼睛:眼睛我设想的场景是小黄人在悠闲地走路,然后不时左右看一下两边的风景,所以眼睛转动很悠哉,所以分配的时间可以稍微长一点点;

3.嘴巴:让嘴巴动起来确实比较难,因为要动的话,遮罩也得实时跟着改变,而且不能露馅,所以最后实现的是当它往左边看了一下之后卖了一下萌;

4.双手和双脚:这部分确实很难逼真,本来脚就不是正常的走路状态,所以只能按卓别林老爷爷的走路方式模拟一下,而且左右脚动作是紧接实现而不是同步实现。双手的话,我是简单模拟人在走路时有摆手的自然惯性,而且是左脚配右手,右脚配左手。考虑到它的双手是放在背后的,所以我的摆动幅度设置为非常小,有效果但不明显。

补充动画代码:

 

本文内容非原创,转载于:http://www.cnblogs.com/jr1993/p/4658772.html
转载或者分享请保留原作者来源链接。

You Might Also Like

No Comments

Leave a Reply