[分享]css3动画隐藏没显示图片

CSS3动画可以轻松地隐藏或显示图片。这是一种很方便的技术，可以使网页更加灵活和动态。下面我们来看一下如何使用CSS3动画实现隐藏和显示图片。/ 定义一个类 / .hide { opacity: 0;...

CSS3动画可以轻松地隐藏或显示图片。这是一种很方便的技术，可以使网页更加灵活和动态。下面我们来看一下如何使用CSS3动画实现隐藏和显示图片。

/* 定义一个类 */
.hide {
    opacity: 0; /* 设置透明度为0 */
    transition: opacity 1s ease-in-out; /* 设置动画过渡效果 */
}

/* 鼠标悬停时显示图片 */
.show:hover img {
    opacity: 1; /* 设置不透明度为1 */
} 

这里我们定义了一个类叫做“hide”，并在其中设置了透明度为0，并且使用了过渡效果。当想要隐藏图片时，将该类添加到img元素上即可。

/* 隐藏图片 */
<img src="example.jpg" class="hide" /> 

当我们需要显示图片时，可以在CSS中定义一个悬停时的效果来实现。例如，当用户悬停在图片上时，将透明度设置为1，从而显示图片：

/* 显示图片 */
.show:hover img {
    opacity: 1;
} 

这样，我们就实现了通过CSS3动画来隐藏和显示图片的效果！