我记得看到其中一些动画：https : //www.youtube.com/watch?v=cH9WLrcsrx8并且想知道能够使用 css3 和/或 html5 重新创建其中的一些。特别是动画（如果我们用 html 说话）一个 div 会部分地出现在烟雾中。
在 css3 和 html5 画布中，我们能够做一些令人惊叹的事情：https : //freshdesignweb.com/html5-css3-3d-examples-demo/但是我想知道 div 是否可以部分地逐渐向上出现在粉扑中的烟。
使用这些技术可以实现吗？
据我所知，我们只能操作完整的 div，而不是部分。
您可以通过使用 CSS 动画或过渡来逐渐改变 div 的高度，以产生它逐渐向上出现的错觉。我创建了一个纯 CSS 示例，但也可以使用 javascript 和/或画布来完成。为了节省时间，我使用了灰色 div 作为“烟雾”，但您可能希望根据需要将其更改为动画背景或其他内容。
.smoke {
position: absolute;
width: 240px;
height: 140px;
opacity: 0;
/* You will probably want to use a animated gif as the background instead of a gradient */
background: radial-gradient(circle, darkgrey, white);
border-radius: 50px;
animation-name: smoke;
animation-duration: 5s;
}
.element-to-appear {
width: 200px;
height: 100px;
margin: 20px;
position: relative;
background-color: lightblue;
overflow: hidden;
animation-name: appear;
animation-duration: 2s;
}
@keyframes appear {
0% {
height: 0px;
top: 100px;
}
100% {
height: 100px;
top: 0px;
}
}
@keyframes smoke {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}<!DOCTYPE html>
<html>
<body>
<div class="element-to-appear">
Lorem ipsum dolor sit amet, vero ornatus commune mea et, sale facer graeco ex vim. Ut nonumes mediocritatem est, soluta instructior no eos. Ad quo quaestio principes. Dolorem dissentiet his ad.
</div>
<div class="smoke">
</div>
</body>
</html>如果您希望 div 不对称地淡入，您可以创建一个蒙版并像这样滑动它：
#fade-in {
background-color: lightblue;
width:300px;
left: 0px;
}
#mask {
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
animation-name: mask-anim;
animation-duration: 4s;
width:600px;
left: -600px;
}
#mask, #fade-in {
position: absolute;
top: 0px;
height: 200px
}
@keyframes mask-anim {
0% {
left: 0px;
}
100% {
left: -600px;
}
}<div id="fade-in">
Lorem ipsum dolor sit amet, cu liberavisse interpretaris mel, qui te nonumes suavitate mediocritatem, vel no commodo appellantur. Alii putant audiam te per, ius et rebum porro. Ad voluptatum incorrupte quo, viris denique eum no. Id esse dicant partiendo ius, sed doctus placerat ut. In quo fugit epicuri ponderum, et eos oblique labitur.
</div>
<div id="mask"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句