Question

我记得看过其中一些动画：https://www.youtube.com/watch?v=cH9WLrcsrx8并且想知道能否使用css3和/或html5重新创建其中的一些动画。特别是动画，其中（如果我们在html中说话）一个div会在一阵烟雾中部分地出现。

在css3和html5画布中，我们可以做一些令人惊叹的事情：https://freshdesignweb.com/html5-css3-3d-examples-demo/但是我想知道div是否会在一阵烟雾中部分地逐渐显现出来。

这可能使用这些技术吗？

据我所知，我们只能操纵完整的div，而不是部分。

Answer 1

您可以通过使用CSS动画或过渡来逐渐改变div的高度，以产生逐渐向上出现的幻觉。我创建了一个纯CSS示例，但也可以使用javascript和/或画布来完成。为了节省时间，我使用了灰色div作为＆＃34;烟雾＆＃34;，但您可能希望根据您的需要将其更改为动画背景或其他内容。

＆＃13;

.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;
  }
}

＆＃13;

<!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>

＆＃13;

如果你想让div不对称地淡入淡出，你可以创建一个蒙版并像这样滑动它：

＆＃13;

#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;
    }
}

＆＃13;

<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>

＆＃13;

有没有办法用css3和html5的新实现隐藏div的一部分？

1 个答案: