使用CSS transition与opacity可实现元素透明度渐变效果，如淡入淡出或悬停隐藏。通过设置初始opacity值并结合:hover等状态改变该值，transition自动补全动画过程，性能优良且无需JavaScript。例如按钮悬停时opacity从1过渡到0.5；若需完全隐藏元素并释放布局空间，应配合visibility使用，因display不可动画。典型应用包括图片加载完成后的淡入效果：初始opacity为0，加载后添加类使opacity变为1，配合onload事件触发过渡。此方法简洁高效，适用于多数透明度动画场景。
使用 CSS 的 transition 与 opacity 结合，可以轻松实现元素的透明度渐变效果，比如淡入、淡出或悬停时的柔和显示隐藏。这种做法性能好，且无需 JavaScript。
要实现渐变，只需设置初始 opacity，然后通过伪类（如 :hover）或类切换来改变 opacity 值，transition 会自动补全中间帧动画。
.fade-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
opacity: 1; /* 初始不透明 */
transition: opacity 0.3s ease; /* 过渡效果 */
}
.fade-button:hover {
opacity: 0.5; /* 悬停时变半透明 */
}当鼠标移上按钮时，opacity 从 1 平滑过渡到 0.5，持续 0.3 秒，使用 ease 缓动函数。
解决方法是结合 opacity 和 visibility，并用 JavaScript 控制类切换时机：
立即学习“前端免费学习笔记（深入）”；
.modal {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.modal.hidden {
opacity: 0;
visibility: hidden;
}JavaScript 中可先添加 hidden 类，等动画结束后再移除元素或更改状态。
.image {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.image.loaded {
opacity: 1;
}<img src="photo.jpg" class="image" onload="this.classList.add('loaded')">图片加载完成后自动添加 loaded 类，opacity 从 0 渐变到 1，实现平滑淡入。
基本上就这些。transition 配合 opacity 简单高效，适合大多数透明度动画场景，注意合理搭配 visibility 处理交互逻辑即可。
以上就是css transition与opacity结合制作透明渐变的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
261
收藏
