[分享]css3实现图片上移

CSS3中有很多强大的动画效果，其中之一是实现图片上移效果。可以使用CSS3中的transition属性来实现图片上移效果。

.img{
   position: relative;
   transition: top 0.5s ease-in-out;
}
.img:hover{
   top: -10px;
} 

首先，要让图片具有相对定位，这是因为要通过调整top值来实现图片上移效果。然后，在.img选择器中，使用transition属性来指定过渡效果，其中top 0.5s表示在0.5秒内过渡，ease-in-out表示缓慢加速，然后减速，这样可以实现一个比较舒缓的动画效果。

接着，在:hover伪类中，设置top值为负数，这样就可以使图片上移了。此时，因为已经在transition属性中指定了过渡，所以可以看到图片在0.5秒内平滑地上移。

如果希望效果更加生动，还可以给图片添加一些阴影或者透明度效果，这样可以增强视觉效果。另外，还可以在:hover伪类中，增加一些其他的动画效果，比如旋转或位移等等，可以根据具体的需求来自由发挥。

总之，CSS3可以帮助我们实现很多酷炫的动画效果，而图片上移效果只是其众多效果中的一个。希望通过这篇文章的介绍，能够帮助大家更好地使用CSS3来实现动画效果。