你的位置:首页 > 软件开发 > 网页设计 > 用纯css3绘制的能自适应浏览器的哆啦a梦动画

用纯css3绘制的能自适应浏览器的哆啦a梦动画

发布时间:2016-11-29 23:00:14
本人是学生,正在想深入学习html5和css3,所以最近在研究用css3绘制矢量图,于是就用纯css3基于百分比方案绘制了能自适应浏览器宽度而自动变化比例的哆啦a梦动画,动画的宽高比例为:”4:6.5“,动画理论上能基于”4:6.5“的宽高比例来无限放大且完美展示,但动画的最小宽 ...

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

动画的宽高比例为:”4:6.5“,动画理论上能基于”4:6.5“的宽高比例来无限放大且完美展示,但动画的最小宽高建议为:”150px:243.75px“,因为动画的边框单位是”px“,所以本人亲测证实大于或等于此宽高,动画的效果稳定且不变形,过小则会错位。

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

 

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

 

用纯css3绘制的能自适应浏览器的哆啦a梦动画

废话不多说了,直接给代码。

html 代码:

<div class="dlam" title="用纯css3绘制的能自适应浏览器的哆啦a梦动画">    <div class="bozi">    <div class="lingdan">      <div class="shudiao"></div>    </div>  </div>  <div class="top">     <div class="top-lian">       <div class="top-yan1"><div class="p1"></div></div>      <div class="top-yan2"><div class="p2"></div></div>       <div class="top-bi1"></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梦动画

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。