用纯css3绘制的能自适应屏幕宽度的哆啦a梦动画

本人是学生，正在想深入学习 html5 和 css3 ，所以最近在研究用 css3 绘制矢量图，于是就用纯 css3 基于百分比方案绘制了能自适应浏览器宽度而自动变化比例的哆啦a梦动画，

动画的宽高比例为：” 4 ： 6.5 “，动画理论上能基于” 4 : 6.5 “的宽高比例来无限放大且完美展示，但动画的最小宽高建议为：” 150px ： 243.75px “，因为动画的边框单位是” px “，

所以本人亲测证实大于或等于此宽高，动画的效果稳定且不变形，过小则会错位。

然后有部分表情动画是通过 css 伪类“ ：hover “来触发，这让哆啦A梦显得更有灵性，给人更好的体验。

PS : 兼容 css3 的浏览器一般都可以正常观看，下面是网页截图：

一瞬间的灵感，近4小时的原型编码，4天时间的修改调整，成果全在下面，废话不多说了，直接给代码。

html 代码：

   div   class  ="dlam"  > 
    
       div   class  ="bozi"  > 
           div   class  ="lingdan"  > 
               div   class  ="xiaoyuan"  >  div  > 
               div   class  ="shudiao"  >  div  > 
           div  > 
       div  > 
       div   class  ="top"  > 
            div   class  ="top-lian"  > 
                 div   class  ="top-yan1"  >  div   class  ="p1"  >  div   class  ="p4"  >  div  >  div  >  div  > 
                 div   class  ="top-yan2"  >  div   class  ="p2"  >  div   class  ="p4"  >  div  >  div  >  div  > 
                 div   class  ="top-bi1"  >  div   class  ="p5"  >  div  >  div  > 
                 div   class  ="bixian"  >     div   class  ="bixian2"  >  div  >  div  > 
                 div   class  ="top-zui"  > 
                       div   class  ="top-zui2"  > 
                               div   class  ="top-bi2"  >  div  > 
                       div  > 
                 div  > 
                 div   class  ="mao1"  >  div  > 
                 div   class  ="mao2"  >  div  > 
                 div   class  ="mao3"  >  div  > 
                 div   class  ="mao4"  >  div  > 
                 div   class  ="mao5"  >  div  > 
                 div   class  ="mao6"  >  div  > 
            div  > 
       div  > 
    
     div   class  ="shengti"  > 
       div   class  ="shoubi1"  >  div   class  ="ctou1"  >  div  >  div  > 
       div   class  ="duzi"  > 
      　　   div   class  ="koudai"  >  div   class  ="xiaokoudai"  >  div  >  div  > 
       div  > 
       div   class  ="shoubi2"  >  div   class  ="ctou2"  >  div  >  div  > 
       div   class  ="jiao1"  >  div   class  ="jiaozi"  >  div  >  div  > 
       div   class  ="jiao2"  >  div   class  ="jiaozi"  >  div  >  div  > 
     div  > 
    
   div  >  

查看更多关于用纯css3绘制的能自适应屏幕宽度的哆啦a梦动画的详细内容...