我记得看过其中一些动画：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>