CSS图片延时出现 |css边框源码

要实现这种效果，可以使用CSS中的transition属性。transition属性可以设置元素在改变时的过渡效果，包括延时时间、持续时间、过渡类型等等。具体代码如下：

img {
opacity: 0;   // 元素初始透明度为0，不显示
transition: opacity .5s ease-out .3s;   // 过渡类型为ease-out，延时0.3秒
}
img.show {
opacity: 1;   // 到达.show状态时透明度为1，显示图片
}

其中，.show是一个自定义的类，可以通过JS的操作在页面加载后添加到元素中。JS代码如下：

window.onload = function () {
var img = document.querySelector('img');
img.classList.add('show');   // 添加.show类到img元素中
}

通过上述代码，图片在页面加载后会延时0.3秒后才出现，且会有0.5秒的过渡时间，效果比较平滑自然。