商城图片特效、纯css图片上移动、左移动、右移动、放大、图片蒙白效果

纯css写实现效果，复制对应样式到问价，根据上下级添加对应的 样式

每种效果需要复制两端代码 1.转换 2. 过渡动画

/过渡效果/
.movetop img { /上移动/
transition: 0.5s all ease;
}
.moveleft img { /左移动/
transition: 0.3s all ease;
}
.moveright img { /右移动/
transition: 0.4s all ease;
}
.movebig img { /放大/
transition: 0.4s all ease;
}

/hover时修改Transform属性应用于元素的2D或3D转换/
.movetop li:hover img { /图片上移效果/
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
transform: translate(0, -10px);
}
.moveleft li:hover img { /图片左移效果/
-webkit-transform: translate(-10px, 0);
-moz-transform: translate(-10px, 0);
transform: translate(-10px, 0);
}
.moveright li:hover img { /图片右移效果/
-webkit-transform: translate(10px, 0);
-moz-transform: translate(10px, 0);
transform: translate(10px, 0);
}

.movebig:hover img { /图片放大效果/
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}

.movemask:hover img{ /图片蒙白/
opacity:.7;
}