html打开网页图片自动淡入效果怎么实现

您可以使用CSS3中的transition属性来实现这个效果。具体地，在你的CSS文件中为图片设置以下属性：

img {
opacity: 0;
transition: opacity 1s ease-in-out;
}

这将使图片初始时透明度为0，并且在1秒内以简单的“ease-in-out”过渡效果淡入到完全不透明。

接下来，你要为你的HTML页面中的图片添加相应的类：

<img src="your_image.jpg" class="fade-in" />

最后，在你的JavaScript文件中，你可以添加一些代码，将这些被指定类名“fade-in”的图片的不透明度设置为1，以实现淡入效果：

window.onload = function() {
var imgs = document.querySelectorAll('.fade-in');
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.opacity = 1;
}
};

这段代码将在文档完成加载时运行，为所有具有类名“fade-in”的图片设置不透明度为1。这样，当你的网页加载完毕时，图片应该已经以淡入的方式显示了出来。