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%是圆形)
}


展开阅读全文

没有更多推荐了,返回首页