[分享]css3实现鼠标放上图片上移

CSS3可以实现许多酷炫的效果，比如鼠标放上图片时能够实现图片向上移动的效果。这种效果可以让网页更加生动，吸引用户的注意力。下面我们来详细看一下如何使用CSS3实现这个效果。 .moveup { : ...

CSS3可以实现许多酷炫的效果，比如鼠标放上图片时能够实现图片向上移动的效果。这种效果可以让网页更加生动，吸引用户的注意力。下面我们来详细看一下如何使用CSS3实现这个效果。

 <style>
    .move-up {
      position: relative;
      transition: 0.3s ease-in-out;
    }
    .move-up:hover {
      top: -10px;
    }
  </style> 

上面的代码段中，我们首先定义了一个类名为move-up，里面包含了两个样式。第一个样式定义了图片的position为relative，这意味着该元素的定位是相对于它在文档中的位置。同时定义了transition属性，这个属性可以让我们在一定时间内让元素进行平滑过渡。

第二个样式发生在鼠标放上元素上时，我们定义了元素的top属性为负值，这样就可以让图片向上移动了。同时我们也设置了transition-timing-function为ease-in-out，这意味着过渡效果会相对缓慢。

在HTML部分，我们只需要在对应元素上应用move-up类名即可完成这个效果：

 <img class="move-up" src="example.png"> 

这样我们就完成了效果的演示。当用户将鼠标放上元素时，元素会平滑地向上移动，获得更好的用户交互体验。