css 透明_CSS实现透明度变化的动画 （淡入淡出效果）

实现透明度变化的动画可以使用CSS3中的transition属性和opacity属性。下面是一个简单的示例代码：

HTML代码：

<div class="box"></div>

CSS代码：

.box {
  width: 200px;
  height: 200px;
  background-color: #000;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

.box:hover {
  opacity: 0.5;
}

解释：
首先，我们定义了一个宽高为200px的黑色盒子，初始时不透明度为1。然后，我们在.box选择器中设置了transition属性，意思是当.opacity属性发生变化时，过渡时间为1秒，过渡效果为ease-in-out缓入缓出。最后，我们在:hover选择器中设置了.opacity属性为0.5，当鼠标悬停在盒子上时，盒子的透明度会发生变化，形成淡入淡出的效果。

你可以根据自己的需求调整transition和opacity属性的值，来实现不同的透明度变化动画效果。