css过渡与opacity结合实现淡入淡出效果-css教程-PHP中文网

css过渡与opacity结合实现淡入淡出效果

P粉602998670

发布： 2025-09-20 13:46:01

原创

152人浏览过

使用CSS transition与opacity可实现元素淡入淡出效果。.fade-in初始opacity为0，添加.show类后过渡至1实现淡入；.fade-out初始opacity为1，添加.hide类后降至0完成淡出，配合visibility:hidden和display:none可在动画后彻底隐藏元素，适用于模态框、轮播图等场景。

css过渡与opacity结合实现淡入淡出效果

使用CSS过渡（transition）与

opacity

登录后复制

属性结合，可以轻松实现元素的淡入淡出效果。这种方式无需JavaScript，性能良好，并且易于控制。

基本原理

opacity 控制元素的透明度，取值范围从0（完全透明）到1（完全不透明）。通过 transition 定义 opacity 的变化过程，就能实现平滑的淡入淡出动画。

实现淡入效果

让元素从不可见到可见：

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

.fade-in.show {
  opacity: 1;
}

登录后复制

初始状态 opacity 为 0，添加

.show

登录后复制

类后 opacity 变为 1，过渡动画自动触发。

立即学习“前端免费学习笔记（深入）”；

实现淡出效果

让元素从可见到隐藏：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

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

.fade-out.hide {
  opacity: 0;
}

登录后复制

当添加

.hide

登录后复制

类时，opacity 渐变为 0，实现淡出。

配合 display 使用更自然

由于

opacity: 0

登录后复制

的元素仍占据布局空间，若想彻底隐藏元素，可结合

visibility

登录后复制

或在动画结束后设置

display: none

登录后复制

。

例如：

.fade-out {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

.fade-out.hidden {
  opacity: 0;
  visibility: hidden;
}

登录后复制

这样既能动画过渡，又能真正隐藏元素。

常见应用场景

模态框出现/关闭
图片轮播切换
提示信息显示与消失
页面加载占位效果

基本上就这些，掌握 opacity 和 transition 的配合，就能快速做出流畅的视觉过渡效果。不复杂但容易忽略细节，比如过渡时间、延迟和完成后的状态处理。

以上就是css过渡与opacity结合实现淡入淡出效果的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

html中嵌入css样式的方法有哪些_css引入方式详细说明在css中:focus-within输入区域样式 CSS响应式元素如何处理溢出_content-fit与overflow技巧 css布局多行文本溢出处理技巧 css如何在动态页面中插入style标签