css3图片动态效果

HTML 代码
<div style="width:150px; height:150px;" class="overflow imgtrans">
    <img src="img.jpg" class="img-w150" />
</div>
        

响应式图片

让图片跟随屏幕尺寸100%放大和缩小。

HTML 代码
<img src="..." class="maximg" />
        

图片形状

HTML 代码
<div class="f-l"><img src="img.jpg" class="img-w150" /></div>
<div class="f-l ml-10"><img src="img.jpg" class="img-w150 radius-75" /></div>
<div class="f-l ml-10"><img src="img.jpg" class="img-w150 img-p-5" /></div>

img-w50 ~ img-w300 / 50
img-p-5 ~ img-p-10
        

头像

HTML 代码
<div class="f-l"><img src="avatar-default.jpg" class="img-w50 radius-50" /></div>
<div class="f-l ml-10"><img src="avatar-default.jpg" class="img-w100 radius-75" /></div>
<div class="f-l ml-10"><img src="avatar-default.jpg" class="img-w150 radius-80" /></div>