Question

我在纯css中制作了一个diaporama，到目前为止一直很好，但是每张照片突然变为另一张照片，我试图逐渐改变（一张照片慢慢消失而另一张消失）。

我尝试过所有的计时功能（除了立方体，因为我不太确定如何使用它），但它没有用。

如何逐步改变？我见过有人只用css3做这件事，但我无法重现它。

这是css 和html

.diapo {
  width: 350px;
  height: 150px;
  border: 3px solid #544B4D;
  background-image: url("http://via.placeholder.com/350x150/F00");
  background-size: 350px 150px;
  animation-name: diapo1;
  animation-duration: 9s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

@keyframes diapo1 {
  0% {
    background-image: url("http://via.placeholder.com/350x150/F00");
  }
  33% {
    background-image: url("http://via.placeholder.com/350x150/0F0");
  }
  66% {
    background-image: url("http://via.placeholder.com/350x150/00F");
  }
}

<body>
  <div class="diapo">
  </div>
</body>

感谢您的回答！

Answer 1

我不知道大多数浏览器可以逐渐解释背景图像的变化......他们如何解释这种变化？如果它意味着图片从顶部滑落，它是否意味着淡出/淡入，是否意味着旧图片上方新图片的淡入？

我认为您需要设置淡出/淡出的动画（下面的代码可能无法正常工作，只是为了给您一个想法）：

@keyframes diapo1 {
  0% {
    background-image: url("pics-about-us/a-u1.jpeg");
  }
  30% { opacity:1;}
  33% {
    background-image: url("pics-about-us/a-u3.jpeg");
    opacity:0;
  }
  36% {opacity:1}
  //etc...

如果您希望通过逐步更改整个动画来实现，我会在每个背景图像上使用<div>子项并单独为每个动画制作动画。

Answer 2

IMO，最好的解决方案是在DOM中使用多个img并结合一些不透明度动画：

＆＃13;

.container {
  position: relative;
  /* Define size on the container: (best if aligned with images size) */
  width: 350px;
  height: 150px;
  box-sizing: content-box;
  
  /* fancy stuff, not required */
  border: 1px solid #000;
  border-radius: 5px;
  overflow: hidden;
}

.container > img {
  height: inherit;
  width: inherit;
  
  /* images are stacked on top of each other */
  position: absolute;
  top: 0;
  left: 0;
  
  opacity: 0;
  
  /* 10s is total time (time for a complete cycle) */
  animation: fadeInOut 10s infinite;
}

.container > img:nth-child(2) {
  animation-delay: 3.33s; /* totalTime * 1/3 */
}
.container > img:nth-child(3) {
  animation-delay: 6.66s; /* totalTime * 2/3 */
}

/* choose a % of anim time allocated to transition,
let's call it transTime. Here it's 10%. */
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  /* transTime */
  10% {
    opacity: 1;
  }
  /* transTime + (100% / image count) */
  43% {
    opacity: 1;
  }
  /* previous + transTime */
  53% {
    opacity: 0;
  }
}

＆＃13;

<div class="container">
  <img src="http://via.placeholder.com/350x150/F00"/>
  <img src="http://via.placeholder.com/350x150/0F0"/>
  <img src="http://via.placeholder.com/350x150/00F"/>
</div>

＆＃13;

我强烈建议您使用允许变量和循环（可能是SCSS或更少）的预处理器来生成nth-child部分甚至动画块

CSS3 diaporama，如何逐步改变？

2 个答案: