CSS图片阴影+鼠标移上图片放大 变形

在做图片卡片列表的时候我们经常用到图片的呼吸灯效果，实现图片的阴影效果、放大、动态展示

代码：

li img {

display: block;

width: 140px;

height: 140px;

padding: 8px;

background-color: #FFF;

box-shadow: 0px 0px 18px rgba(0,0,0);（图片初始状态无阴影，也可以在颜色后面加个值实现）

-webkit-transition: all ease .3s;

transition: all ease .3s;（变化速度）

margin-bottom:10px;

border-radius: 0px（图片形状初始宽高，既img的宽高）

}

li img:hover {

-webkit-transform: scale(1.05);

transform: scale(1.05);（类似放大倍数）

box-shadow: 0px 0px 18px rgba(0,0,0,0.5);（鼠标移上后的阴影透明度，这里是0.5）

border-radius: 50%（鼠标移上后变形百分比，这里50%是圆形）

}