div+css制作哆啦A梦

Posted wangjiahui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div+css制作哆啦A梦相关的知识，希望对你有一定的参考价值。

纯CSS代码加上

制作动画版哆啦A梦（机器猫）
哆啦A梦（机器猫）我们大家一定都很熟悉，今天给大家演示怎么用纯CSS。代码，来做一个动画版的哆啦A梦.
效果图：

下面代码同学可以查看一下，每个线条及椭圆都是纯CSS代码生成。

首先分析结构
根据原图，将哆啦A梦分为几个结构，然后再分解其他部位。
画出各部分的形状和颜色，然后使用绝对定位（absolute）和相对定位（relative）改变其位置。
各种带弧度形状，使用border-radius属性实现。
倾斜角度，使用transform属性实现。
使用background属性的-webkit-gradient() / -moz-linear-gradient() 画出身体部分的线性色彩变化。

html代码如下：
<!DOCTYPE html>



哆啦A梦（机器猫）动画版
















































css代码如下：