本人是学生,正在想深入学习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的浏览器一般都可以正常观看,下面是网页截图:
废话不多说了,直接给代码。
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
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。