图形等比自适应

头像

HTML:

<!--
  使用background-image + background-size:cover 来实现等比自适应的头像，任何怪异图形在该方法下都能铺满容器。
-->
<span class="avatar">
    <b class="img" style="background-image:url(http://example.com/avatar.jpg)"></b>
</span>

CSS:

.avatar {display:inline-block;width:30px;height:30px;}
.avatar .img {
    display:inline-block;width:100%;height:100%;
    -webkit-background-size:cover;
            background-size:cover;
    background-repeat:no-repeat;
}

图片

等比自适应缩放的图形容器
实现原理基于 [老法新用]使用PADDING-TOP:(PERCENTAGE)实现响应式背景图片

实现方法可以查阅此PPT：等比的自适应图形.pptx

HTML:

<span class="img" style="background-image:url(demo.jpg)"></span>

CSS:

.img {
    padding-top:80%; /* width=320,height=256; padding-top = (height / width); 建议精确到小数点后4位 */
    -webkit-background-size:cover;
            background-size:cover;
}

CSS3动画

两个现成的动画库。

Animate.css

包含了很多基础的css3动画：淡入、淡出、弹跳进入、弹跳退出、旋转进入、旋转退出、还有一些特效，并做了兼容处理，非常实用。

Magic Animations CSS3 – Minimamente

魔法动画

动画效果更加细腻质感，包含：魔法效果、闪动、透视、旋转、幻灯、Bomb等等