[分享]css一张图片慢慢出现

CSS是网页设计中不可或缺的一部分，它能够为网页增加更多的样式和动态效果。一种常用的效果是，将一张图片慢慢地出现在网页上。下面是实现这种效果的CSS代码。.fadein { opacity: 0; t...

CSS是网页设计中不可或缺的一部分，它能够为网页增加更多的样式和动态效果。一种常用的效果是，将一张图片慢慢地出现在网页上。下面是实现这种效果的CSS代码。

.fade-in {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.fade-in.active {
    opacity: 1;
} 

这段CSS代码定义了一个.fade-in类，它的opacity（透明度）属性为0，使用了2秒的过渡效果（transition）来使其慢慢地出现。同时还定义了.fade-in.active类，它的opacity属性为1，当该类被添加到一个元素上时，元素就会从透明到不透明地显示出来。

在HTML代码中，需要将刚才定义的类应用到一个img标签上，并为其定义一个唯一的ID。

<img id="my-image" src="image.jpg" class="fade-in"> 

这段HTML代码中，定义了一个ID为"my-image"的img标签，并将刚才定义的.fade-in类应用到了它上面。这时该图片是不可见的。

接下来，借助JavaScript，我们可以在网页加载完成后，为这个img标签添加.fade-in.active类，从而使它慢慢地出现。

window.addEventListener("load", function() {
    var img = document.getElementById("my-image");
    img.classList.add("active");
}); 

这段JavaScript代码使用了window的"load"事件，当网页加载完成后，它就会将ID为"my-image"的img标签找到，并为其添加.active类，从而触发CSS中定义的过渡效果，使图片慢慢地出现。