css3图片动态效果(鼠标经过)


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

响应式图片

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


<img src="img.jpg" class="maximg" />

<div class="maximg">
    <img src="img.jpg" />
</div>
        

图片形状

固定宽度 .img-w150

数值:20,25,30,40,50,60,70,80,90,100,120,150,200,250,300

圆形图片 .radius-75

强制设置直角 .radius-0

数值: 4 ~ 25

数值: 50,55,60,65,70,75,80

数值(百分比): 10p,20p,30p,40p,50p

图片内边距 .img-p-5

数值: 5,10,15,20,25


<div><img src="img.jpg" class="img-w150" /></div>
<div><img src="img.jpg" class="img-w150 radius-75" /></div>
<div><img src="img.jpg" class="img-w150 img-p-5" /></div>
        

头像

圆形图片 .radius-75

强制设置直角 .radius-0

数值: 4 ~ 25

数值: 50,55,60,65,70,75,80

数值(百分比): 10p,20p,30p,40p,50p


<div><img src="img.jpg" class="img-w50 radius-50" /></div>
        

图片和文字垂直居中

我是文字
class="align-items"

<div class="f-l align-items"><img src="http://www.ourphp.net/images/ico1.png?1" height="40" class="f-l"> 我是文字</div>