Question

这是我的基本HTML结构：

<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
<script>

        SC.initialize({
          client_id: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
          redirect_uri: 'http://localhost/test/callback.php'
        });

        // initiate auth popup
        SC.connect().then(function() {
          return SC.get('/me');
        });
</script>

我希望我的fadeInDown div看起来像那样：https://fabriceleven.com/dev/quickly-add-css-fade-in-animations/（“走下去”的例子）

如何将div放在最重要的位置以及其他所有内容？

Answer 1

它向您展示了如何在您包含的链接

中实现此目的

.on-top {
  position: absolute;
  width: 100%;
  text-align: center;
}
.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

<body>
  <div class="on-top animate fadeInDown">
    I want this to appear centered, from the top and over all my content
  </div>

  <div id='content'>
    ...much complex html layout...bootstrap...wow
  </div>
</body>

如何添加一个从我的内容顶部淡入的居中div？

1 个答案: