[分享]css3控制div渐隐渐现

CSS3是一种新的CSS编写语言，可用于控制网页上各个元素的外观和布局。其中，控制div元素渐隐渐现是CSS3中非常重要的一个功能。我是一个div块元素 .fadeinout { opacity: 1...

CSS3是一种新的CSS编写语言，可用于控制网页上各个元素的外观和布局。其中，控制div元素渐隐渐现是CSS3中非常重要的一个功能。

<div class="fade-in-out">我是一个div块元素</div>

<style>
.fade-in-out {
  opacity: 1; /*初始为不透明*/
  transition: opacity 2s linear; /*设置渐变效果*/
}

.fade-in-out:hover {
  opacity: 0.5; /*鼠标悬停时，透明度变为0.5*/
}
</style> 

以上代码通过使用CSS3中的opacity属性和transition属性来实现div块元素的渐隐渐现。首先，在div的样式中设置初始opacity为1，即不透明，然后通过transition属性设置渐变效果，这里我们设置2秒钟的时间来实现平滑的渐变效果。

当鼠标悬停在div块元素上时，我们通过:hover伪类选择器来实现opacity属性的变化，这里我们将透明度设置为0.5，从而实现渐隐效果。

通过使用CSS3中的opacity属性和transition属性，我们可以轻松地实现div元素的渐隐渐现效果，从而让网页更加生动有趣。