html - 能够在 html/css 中移动 div 容器的淡入淡出图像

Question

这里是 HTML/CSS 菜鸟。我目前有 5 张图像，它们相互重叠并以 8 秒的间隔淡入淡出。为此，我将图像设置为具有绝对定位。我现在正在动态创建这个站点，所以我想将这些淡入淡出图像放在一个 div(“crossfade_container”)中，这样我就可以在浏览器大小发生变化时将它们居中。显然，图像本身的绝对定位不允许这种动态定位。

以下是我的HTML:

<div class="crossfade_container">
  <div id="crossfade">
      <img src="Images/Michigan_1.png" />
      <img src="Images/Miller_1.png" />
      <img src="Images/OSU_Helmets.png" />
      <img src="Images/Go_Blue.png" />
      <img src="Images/OSU_UM.png" />
  </div>
</div>

以下是我在图像之间创建淡入淡出的 CSS:

#crossfade > img { 
    width: 695px;
    height: 350px;
    position: absolute;
    top: 240px;
    left: 441px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    box-shadow: 2px 2px 2px silver;

    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 40s linear infinite 0s;
    -moz-animation: imageAnimation 40s linear infinite 0s;
    -o-animation: imageAnimation 40s linear infinite 0s;
    -ms-animation: imageAnimation 40s linear infinite 0s;
    animation: imageAnimation 40s linear infinite 0s; 
  }

  #crossfade > img:nth-child(2) {
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s; 
  }
  #crossfade > img:nth-child(3) {
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s; 
  }
  #crossfade > img:nth-child(4) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
  }
  #crossfade > img:nth-child(5) {
    -webkit-animation-delay: 32s;
    -moz-animation-delay: 32s;
    -o-animation-delay: 32s;
    -ms-animation-delay: 32s;
    animation-delay: 32s; 
  }

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

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

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

  @-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
       -ms-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 }
  }

至此，一切如我所愿。令我困惑的是代码的动态方面。这是我使用的以下代码无济于事:

@media screen and (min-width : 481px) and (max-width: 695px) {

.crossfade_container {
        display: block;
        float: none;
        background-color: red;
        width: 480px;
        height: 255px;

        margin-left: auto;
        margin-right: auto;
    }
  #crossfade > img {
    width: 480px;
    height: 235px;
    position: relative;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: 0;
  }

有了这个，“.crossfade_container”正是我想要的位置，通过在“#crossfade > img”中将位置更改为“相对”，只有系列中的第一张图像出现在我想要的位置。现在，图像不再堆叠在一起，而是依次出现在页面下方——就好像它们是 block 元素一样(希望这是有意义的)。

如果我需要澄清任何事情，请帮助并告诉我。谢谢。

Answer 1

您可以使用 css position: relative; 到 .crossfade_container 和 position: absolute; 到 #crossfade > img

JSFiddle - DEMO

HTML:

<div class="crossfade_container">
    <div id="crossfade">
        <img src="Images/Michigan_1.png" style="background: red;">
        <img src="Images/Miller_1.png" style="background: blue;">
        <img src="Images/OSU_Helmets.png" style="background: pink;">
        <img src="Images/Go_Blue.png" style="background: orange;">
        <img src="Images/OSU_UM.png" style="background: black;">
    </div>
</div>

CSS:

#crossfade > img {
    width: 695px;
    height: 350px;
    position: absolute;
    top: 50px;
    left: 50px;
    color: transparent;
    opacity: 0;
    z-index: 0;
    box-shadow: 2px 2px 2px silver;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 40s linear infinite 0s;
    -moz-animation: imageAnimation 40s linear infinite 0s;
    -o-animation: imageAnimation 40s linear infinite 0s;
    -ms-animation: imageAnimation 40s linear infinite 0s;
    animation: imageAnimation 40s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
}
#crossfade > img:nth-child(3) {
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s;
}
#crossfade > img:nth-child(4) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
#crossfade > img:nth-child(5) {
    -webkit-animation-delay: 32s;
    -moz-animation-delay: 32s;
    -o-animation-delay: 32s;
    -ms-animation-delay: 32s;
    animation-delay: 32s;
}
@-webkit-keyframes imageAnimation {
    5% {
        opacity: 0;
        -webkit-animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        -webkit-animation-timing-function: ease-out;
    }
    17% {
        opacity: 1
    }
    25% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}
@-moz-keyframes imageAnimation {
    0% {
        opacity: 0;
        -moz-animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        -moz-animation-timing-function: ease-out;
    }
    17% {
        opacity: 1
    }
    25% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}
@-o-keyframes imageAnimation {
    0% {
        opacity: 0;
        -o-animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        -o-animation-timing-function: ease-out;
    }
    17% {
        opacity: 1
    }
    25% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}
@-ms-keyframes imageAnimation {
    0% {
        opacity: 0;
        -ms-animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        -ms-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
    }
}
@media screen and (min-width : 481px) and (max-width: 695px) {
    .crossfade_container {
        position: relative;
        display: block;
        float: none;
        background-color: red;
        width: 480px;
        height: 255px;
        margin-left: auto;
        margin-right: auto;
    }
    #crossfade > img {
        width: 480px;
        height: 235px;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        opacity: 0;
        z-index: 0;
    }

更多信息:

Mozilla MDN CSS Position