码迷,mamicode.com
首页 > Web开发 > 详细

div+css制作哆啦A梦

时间:2019-05-10 13:10:41      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:制作   play   椭圆   执行   back   ace   怎么   身体   头部   

纯CSS代码加上

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

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

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

html代码如下:
<!DOCTYPE html>



哆啦A梦(机器猫)动画版
















































css代码如下: