能否用CSS3和HTML5实现div局部向上烟雾式渐显动画？

你提到的div局部向上烟雾式渐显效果，用CSS3和HTML5完全能搞定，不用局限于只能操作整个元素的思路~ 给你两种实用的实现方向：

1. CSS遮罩（Mask）+ 关键帧动画 #

CSS的遮罩属性（mask-image，兼容旧浏览器可以用-webkit-mask-image）是实现局部显示的利器，配合动画就能模拟烟雾渐显的效果。如果想要更逼真的烟雾不规则感，还可以用带噪点或烟雾纹理的图片作为遮罩。

给你一个简单的示例代码，先感受下基础效果：

<div class="smoke-reveal">
  <p>这是要渐显的内容</p>
</div>

<style>
.smoke-reveal {
  width: 300px;
  height: 300px;
  background: #222;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 初始遮罩完全隐藏元素 */
  mask-image: linear-gradient(to bottom, transparent 100%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 100%, #000 100%);
  /* 绑定渐显动画 */
  animation: smokeReveal 3s forwards;
}

/* 关键帧：让遮罩向上移动，模拟烟雾逐渐散开露出内容的效果 */
@keyframes smokeReveal {
  to {
    mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
    /* 要是想更像真实烟雾，可以替换成带烟雾纹理的PNG遮罩图片，效果会更自然 */
  }
}
</style>

2. HTML5 Canvas 自定义烟雾效果 #

如果需要更细腻、随机的烟雾飘动效果，Canvas会是更好的选择。你可以在Canvas上绘制烟雾粒子，让它们向上飘散，同时逐步露出下方的div内容：

• 先创建一个Canvas覆盖在目标div上方
• 初始化一批随机属性的烟雾粒子（大小、透明度、移动速度都可以随机）
• 每一帧更新粒子的位置和透明度，然后绘制半透明的不规则烟雾形状
• 随着粒子向上扩散，逐步减少Canvas遮罩的覆盖范围，让div内容慢慢显现

这种方法能做出更贴近真实烟雾的动态效果，适合需要高度自定义的场景。

简单来说，你之前觉得只能操作完整div，是因为还没用到CSS遮罩或Canvas的像素级控制能力——这两种技术都能让你精准控制元素的局部显示区域，完全可以复刻你想要的动画效果~

内容的提问来源于stack exchange，提问作者ax.falcon