css3鼠标移开图片慢慢还原

CSS3中的新特性之一就是在鼠标移开图片时，可以慢慢还原至图片最初的状态，这是通过使用CSS3过渡效果实现的。

首先，我们需要在CSS中将鼠标移入时的效果定义好：

img {
   .opacity {
        opacity: 0.5;
        transition: opacity 0.5s;
    }
    :hover {
        opacity: 1;
    }
} 

在上述代码中，我们为img元素定义了.opacity类，在其中定义了透明度效果以及过渡效果。然后为:hover伪类定义了opacity为1的效果，表示鼠标移入时的效果。

接下来，我们需要用JavaScript获取所有img元素，并为其添加mouseover和mouseout事件。当鼠标移入时，我们需要将其opacity值设为1，当鼠标移出时，我们需要将其opacity值设为0.5以慢慢还原至最初的状态：

const imgs = document.getElementsByTagName('img');
for(let i = 0; i < imgs.length; i++){
    imgs[i].addEventListener('mouseover', function(){
        this.classList.remove('opacity');
    });
    imgs[i].addEventListener('mouseout', function(){
        this.classList.add('opacity');
    });
} 

在上述代码中，我们使用了classList属性来添加或删除类。当鼠标移入时，我们删除了.opacity类，使得透明度变为1，当鼠标移出时，我们又添加了.opacity类，使得透明度慢慢还原至0.5。

通过上述代码，我们就可以实现鼠标移入图片时变为不透明，移出时慢慢还原至最初的状态。这样的效果可以提升网站的用户体验，增加用户的互动性。