如何用HTML编辑网页制作一个带有淡入淡出动效的文字卡片-html教程-PHP中文网

最简文字卡片淡入方案是用opacity+transition：给容器设opacity:0、visibility:hidden和transition，通过切换.show类控制显隐；关键点包括容器需有明确宽高、transition写在初始类中、配合visibility防交互干扰。

如何用html编辑网页制作一个带有淡入淡出动效的文字卡片

文字卡片淡入：用 opacity + transition 最简实现

直接给文字卡片加 opacity: 0 和 transition: opacity 0.35s ease-out，再通过类名切换触发——这是最稳、兼容性最好、也最容易调试的方案。别一上来就写 @keyframes 或堆 JS，多数场景根本不需要。

关键点就三个：
- 文字卡片容器（比如 <div class="card">）必须有明确宽高或内容撑开，否则 <code>opacity 变化不可见
- transition 必须写在初始类里（如 .card），不能只写在 .card.show 里，否则反向隐藏没过渡
- 初始状态加 visibility: hidden 配合 opacity: 0，防止透明时仍可点击或占位干扰布局

示例 CSS：

.card {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease-out, visibility 0.35s;
}
.card.show {
  opacity: 1;
  visibility: visible;
}

让卡片在页面加载后自动淡入

不用 JS 也能做，但得靠 animation-delay 配合 @keyframes；用 JS 更可控，尤其要避开“一闪而过”的坑。

常见错误是这样写：

el.style.opacity = '0';<br>el.style.opacity = '1';

→ 浏览器合并渲染，根本看不到过渡。正确做法是：

用 classList.add('show') 触发，不操作内联样式
如果想延迟触发（比如等页面加载完 300ms），用 setTimeout，但别设太短（
若卡片多个，别用 for 循环同步加类，要用 animation-delay 或 setTimeout 错开起始时间，否则全挤在同一帧

JS 示例：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

document.addEventListener('DOMContentLoaded', () => {<br>  setTimeout(() => {<br>    document.querySelectorAll('.card').forEach((card, i) => {<br>      setTimeout(() => card.classList.add('show'), i * 150);<br>    });<br>  }, 300);<br>});