css 淡入淡出

作者：迎着风飛行こ发布日期:2025-09-29 浏览:59

/* CSS 淡入淡出效果 */

/* 定义一个基础的 div 元素 */
div {
  width: 200px;
  height: 200px;
  background-color: red;
  opacity: 0; /* 初始透明度为 0 (完全透明) */
  transition: opacity 2s; /* 过渡效果，2秒内从透明变为不透明 */
}

/* 当鼠标悬停在 div 上时，改变其透明度 */
div:hover {
  opacity: 1; /* 透明度变为 1 (完全不透明) */
}

解释说明：

opacity 属性用于控制元素的透明度。0 表示完全透明，1 表示完全不透明。
transition 属性定义了透明度变化的过渡效果，这里设置为 2 秒钟内完成从透明到不透明的变化。
当鼠标悬停在 div 元素上时，hover 伪类会触发，使 opacity 从 0 变为 1，从而实现淡入效果。

如果你需要淡出效果，可以在其他情况下（如移开鼠标）让 opacity 再次变为 0。

上一篇：css columns

下一篇：input css