这是一款通过纯CSS实现的童话人物小红帽的外观形象,先通过HTML定义小红帽人物的头发、帽子、四肢以及脸部等身体部位,代码如下;然后再通过CSS的transform、box-shadow以及border-radius等关键属性分别对各个部位进行绘制最终生成人物形象。同时也可以在现有代码的基础上定制任何任务或者物体形象。
<div class="cartoon hb"> <div class="hair-back"></div> <div class="foot"></div> <div class="foot"></div> <div class="leg"></div> <div class="leg"></div> <div class="body"></div> <div class="arm"></div> <div class="arm"></div> <div class="basket ha"></div> <div class="hood-bottom"></div> <div class="hood"> <div class="face"> <div class="hair"></div> <div class="cheek"></div> <div class="eye"></div> <div class="smile"></div> </div> </div> <div class="lace"></div> <div class="lace"></div> <div class="knot"></div> </div>