基于CSS实现的老人半身像效果,初始状态是半隐身状态(表示未选中状态),当点击时半身像突出显示并且呈现点头微笑的动画效果(表示选中状态),通过动画的两种效果实现CheckBox复选框的选中以及未选中两种状态,非常的有创意。底层其实是一个CheckBox复选框,在CheckBox的基础上进行了创意动画效果扩展。通过定义头发hari、头head、以及bod身体三大部分,head头部区域又细分为眼睛eyes、nose鼻子、mouth嘴巴等区域div,通过CSS的:after和after等伪元素添加增益效果。最终形成创意的老人形象动画效果。
