Question

我一直在网站上工作，我们想要一个动画背景。但问题是我的Navbar在显示第二张图片后消失了。

这只发生在ios设备上，因为我的合作伙伴尝试使用android并且它的运行方式如此。

（在safari和谷歌浏览器上都尝试过。）

主页：

<body>
<div class="bg-fade">
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
</div>
<div id="main-container">

<!-- header -->
<?php include('inc/header.php'); ?>

CSS - 背景：

.bg-fade > figure {
  top: 0px;
  left: 0px;
  color: transparent;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: -1;
  position: fixed;
  animation: imageAnimation 36s linear infinite 0s;
  background-size: cover;
  backface-visibility: hidden;
}
.bg-fade > figure:nth-child(1) {
  background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_01.jpg');
}
.bg-fade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_02.jpg');
}
.bg-fade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_03.jpg');
}
.bg-fade > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_04.jpg');
}
.bg-fade > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_05.jpg');
}
.bg-fade > figure:nth-child(6) {
  animation-delay: 30s;
  background-image: url('https://maasduinenpas.nl/img/maasduinenpas_bg_06.jpg');
}

/*keyframes .bg-fade*/
@-webkit-keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

CSS - nav：

/*navigation*/
nav ul {
    margin: 37px 0px 0px 0px;
    padding: 0px;
    list-style: none;
    text-align: center;
    z-index: 100;
    opacity: 1;
}
nav li.left {
    float: left;
    color: #ffffff;
    width: 125px;
    margin: 0px -45px 0px 50px;
    display: inline-block;
    padding: 15px 10px 15px 10px;
    font-size: 14px;
    background-color: #E6332A;
    position: relative;
}
nav li.left:hover {
    background-color: #ff3333;
}
nav li.left.active {
    background-color: #E6332A;
}
nav li.left.active:after {
    left: 45%;
    width: 0px;
    bottom: -20px;
    margin: 0px 0px 0px -10px;
    content:"";
    position: absolute;
    border-top: 20px solid #E6332A;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}
nav li.right.navigation-msp {
    color: #ffffff;
    width: 125px;
    margin: 0px 0px 0px 150px;
    display: inline-block;
    padding: 15px 10px;
    font-size: 14px;
    position: relative;
    background-color: #EF7D03;
}
nav li.right.navigation-msp:hover {
    background-color: #F88017;
}
nav li.right.active:after {
    left: 45%;
    width: 0px;
    bottom: -20px;
    margin: 0px 0px 0px -10px;
    content:"";
    position: absolute;
    border-top: 20px solid #EF7D03;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}
nav li.right.active.navigation-msp:hover {
    background-color: #EF7D03;
}
.handle {
    width: 100%;
    color: white;
    cursor: pointer;
    padding: 15px 10px;
    display: none;
    text-align: left;
    box-sizing: border-box;
    background-color: #E6332A;
}
.handle:hover {
    background-color: #FF3333;
}
@media screen and (max-width: 1000px) {
nav ul {
    position: relative;
    color: #ffffff;
    margin-top: 37px;
    margin-bottom: 0px;
    padding: 0;
    overflow: hidden;
    text-align: center;
}
nav li.left {
color: #ffffff;
width: 100%;
margin: 0px 0px 0px 0px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
background-color: #E6332A;
position: relative;
}
nav li.right.navigation-msp {
color: #ffffff;
width: 100%;
margin: 0px 0px 0px 0px;
display: inline-block;
padding: 15px 10px 15px 10px;
font-size: 14px;
position: relative;
}
nav a {
    color: inherit;
    text-decoration: none;
}
nav ul li {
    margin: 0px 10px 0px 10px;
    display: inline-block;
    padding: 15px 10px 15px 10px;
    background-color: #E6332A;
}
nav ul li {
    width: 100%;
    margin: 0;
    text-align: left;
    box-sizing: border-box;
}
nav ul {
    max-height: 0;
}
.showing {
    max-height: 15em;
    border-bottom: 1px solid black;
}
.handle {
    display: block !important;
}

}

Nav ul因动画背景而消失

0 个答案: