css opacity 淡入淡出效果

 

CSS中实现淡入淡出效果，可以使用transition属性来平滑过渡，并使用opacity属性来设置元素的透明度。

例子1：

<div class="fade-box">淡入淡出效果</div>

CSS:

.fade-box {
  width: 200px;
  height: 200px;
  background-color: #f00;
  transition: opacity 1s ease-in-out; /* 设置透明度变化的过渡效果 */
  opacity: 1; /* 初始透明度为1（不透明） */
}
 
.fade-box:hover {
  opacity: 0; /* 鼠标悬停时透明度为0（完全透明） */
}

 

在这个例子中，.fade-box元素在悬停时通过改变opacity值从1（完全不透明）变为0（完全透明），触发淡出效果。当鼠标悬停结束后，透明度会平滑地从0变化到1，触发淡入效果。transition属性定义了这个过渡效果的持续时间为1秒，并使用ease-in-out缓动函数来平滑过渡。

 

例子2：

使用transition属性实现淡入淡出效果的示例代码：

 

.fade-in-out {
  opacity: 0;
  transition: opacity 1s;
}

.fade-in-out:hover {
  opacity: 1;
}

 

 

 

例子3：

.user-sidebar-case {
  position: absolute;
  bottom: -9px;
  right: 60px;
  height: 270px;
  overflow: hidden;
  border-radius: 4px;
  width: 0;
  transition: all .8s;
  z-index: -1;
  opacity: 0;
  cursor: default;
}


.user-sidebar-case:hover{
    width: 401px;
  opacity: 1;
 }