CSS淡入效果 transition属性与dispaly发生冲突
前因:
前几天在练习W3C上的小案例时用display属性代替了visibility属性,发现没有出现淡入效果,这是为什么呢?
个人理解为display不占用空间,也就消失了。当设置display: bloack;时又重新恢复文档流,这时无法实现淡入效果,而visibility一直占用文档流,这时就可以实现淡入效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS淡入效果</title>
<style>
.content {
background-color: #f1f1f1;
display: inline-block;
position: relative;
}
.active {
visibility: hidden;
width: 200px;
height: 120px;
background-color: rgb(236, 92, 104);
border-radius: 10px;
position: absolute;
opacity: 0;
transition: opacity 5s;
}
.content:hover .active {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="content">
今天是个好日子
<div class="active"></div>
</div><br><br>
</body>
</html>