Question

目标：

要在此框架中播放幻灯片。

以下是它的一个例子：

＆＃13;

$slides:4;
 $time_per_slide:4;
 $total_animation_time:$time_per_slide * $slides;
 body {
  background: #000;
}
.container {
  margin: 50px auto;
  width: 500px;
  height: 300px;
  overflow: hidden;
  border: 10px solid;
  border-top-color: #856036;
  border-left-color: #5d4426;
  border-bottom-color: #856036;
  border-right-color: #5d4426;
  position: relative;
}
.photo {
  position: absolute;
  animation: round # {
    $total_animation_time
  }
  s infinite;
  opacity:0;
}
@keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
@for $index from 1 to $slides + 1 {
  img: nth-child(# {
    $index
  }
  ) {
    animation-delay: # {
      $total_animation_time - $time_per_slide * $index
    }
    s
  }
}

＆＃13;

<body>

  <div class="container">
    <img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
    <img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
    <img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
    <img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />

  </div>

</body>

＆＃13;

问题：

如何在容器中显示图像？

Answer 1

您需要将小提琴样式设置为scss而不是css

Here's an updated fiddle

如果您想将其添加到您的网页use the code from this fiddle

中

CSS幻灯片显示在容器内。怎么样？

1 个答案: