css实现页面打开图片淡入

CSS是一种用于控制网页样式的语言，它可以实现许多炫酷的效果。其中之一就是页面打开图片淡入的效果。接下来，我们就来学习如何用CSS实现这种效果。

/* CSS代码 */
img {
  opacity: 0; /* 初始不可见 */
  transition: opacity 1s ease-in-out; /* 渐变效果 */
}

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

以上代码中，我们通过设置图片的透明度初始为0，使其在页面打开时不可见。通过transition属性和ease-in-out缓动函数，实现了渐变的效果。最后，利用JavaScript添加show类，将图片的透明度设置为1，从而展现出来。