PROMULGATOR
??Soledad、Ventele。
湖北省- Html
- Css
- Js
body {
background-color:#eee;
}
.test {
width:540px;
margin:40px auto 0
}
li {
width:180px;
height:180px;
float:left;
list-style:none
}
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 .8s;
margin-bottom:10px;
border-radius:0px
}
li img:hover {
-webkit-transform:scale(1.05);
transform:scale(1.25);
box-shadow:0px 0px 18px rgba(0,0,0,0.5);
border-radius:50%
}
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
立即下载
CSS实现图片呼吸灯、阴影、变形、图片放大鼠标事件
代码描述：简单的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%是圆形）}
2
