Question

我目前在我的网站上有一个使用以下HTML创建的页脚：

<footer>
      <div class="container">
          <div style="float: left;"> www.redbarongames.co.uk </div>
          <div style="float: right;"> <i class="fa fa-copyright" aria-hidden="true"></i> 2016-2017 Redbaron Games. Designed by Conor Watson </div>
      </div>
 </footer>

以下CSS：

footer {
    width: 100%;
    height: 100px;
    background-color: #efefef;
    font-family: 'BebasNeue', sans-serif;
    color: #606060;
    padding-top: 45px;
    -webkit-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
}

我还有一个大的div位于我页面的底部，就在页脚的正上方。我希望这个div从页脚下方淡入，所以我尝试使用Animate.CSS＆＃39; fadeInUp＆＃39;动画，但动画播放在页脚的顶部（如：https://gyazo.com/00c16528ee1a797284cb595235dc2d56）。如何在页脚下方播放动画？

Answer 1

尝试向z-index - <footer>

添加z-index: 9999

footer {
    z-index: 9999;
    width: 100%;
    height: 100px;
    background-color: #efefef;
    font-family: 'BebasNeue', sans-serif;
    color: #606060;
    padding-top: 45px;
    -webkit-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px -5px 5px 0px rgba(0,0,0,0.75);
}

如何在页脚下面制作CSS动画？

1 个答案: