我记得看过其中一些动画:https://www.youtube.com/watch?v=cH9WLrcsrx8并且想知道是否能够使用 css3 和/或 html5 重新创建其中的一些。特别是动画，其中(如果我们用 html 说话)div 会部分向上出现在一阵烟雾中。
在 css3 和 html5 Canvas 中，我们能够做一些令人惊叹的事情:https://freshdesignweb.com/html5-css3-3d-examples-demo/但是我想知道 div 是否可以部分地逐渐向上出现在一阵烟雾中。
使用这些技术是否可行？
据我所知，我们只能操作完整的 div，不能操作部分。
最佳答案
您可以通过使用 CSS 动画或过渡来逐渐改变 div 的高度，从而给人一种它逐渐向上出现的错觉。我已经创建了一个纯 CSS 示例，但它也可以使用 javascript 和/或 Canvas 来完成。为了节省时间，我使用灰色 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 不对称地淡入，你可以创建一个 mask 并像这样滑动它:
#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>关于html - 有什么方法可以用 css3 和 html5 的新实现来隐藏部分 div 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50379715/