用css实现div显示出来时有过渡效果

可以使用CSS3的transition属性来实现div显示出来时的过渡效果。

具体步骤如下：

1. 在CSS样式中为div设置初始状态，例如设置opacity为0，表示初始状态下div是不可见的。

2. 在CSS样式中为div设置过渡属性 transition，例如设置transition: opacity 1s，表示当div的opacity属性发生变化时，过渡时间为1秒。

3. 当需要显示div时，使用JavaScript或者CSS将div的opacity属性设置为1，此时div就会以过渡效果显示出来。

示例代码如下：

HTML:

CSS:

.box { opacity: 0; /* 初始状态下div不可见 / transition: opacity 1s; / 设置过渡属性 */ }

.box.show { opacity: 1; /* 显示div */ }

JavaScript:

var box = document.querySelector('.box'); box.classList.add('show'); /* 使用CSS将div的opacity属性设置为1，显示div *