Question

我正在尝试为自举轮播添加缩放效果，但似乎无法触发它：（

我相信我可能必须将语法添加到核心_carousel.scss文件中（或者可能不是吗？）。因此，考虑到这一点，我尝试将其添加到常规CSS文件以及_carousel.scss文件中，但没有任何乐趣。

有没有其他的编码员可以帮忙？

.carousel-item {
  height: 100vh;
}

.carousel-image-1 {
  background: url("../img/image1.jpg");
  background-size: cover;
}

.carousel-image-2 {
  background: url("../img/image2.jpg");
  background-size: cover;
}

.carousel-image-3 {
  background: url("../img/image3.jpg");
  background-size: cover;
}

@-webkit-keyframes zoom {
 from {
  -webkit-transform: scale(1, 1);
 }
 to {
  -webkit-transform: scale(1.5, 1.5);
 }
}

@keyframes zoom {
 from {
  transform: scale(1, 1);
 }
 to {
  transform: scale(1.5, 1.5);
 }
}

.carousel-inner .carousel-item {
  -webkit-animation: zoom 5s;
  animation: zoom 5s;
}

<section id="showcase">
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item carousel-image-1 active"></div>
    <div class="carousel-item carousel-image-2"></div>
    <div class="carousel-item carousel-image-3"></div>
  </div>
</div>

Answer 1

我使用此代码，并且可以

.carousel-inner .carousel-item > img {
  -webkit-animation: thing 20s;
  -o-animation: thing 20s;
  animation: thing 20s; 
}
@keyframes thing {
  from {
     transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

如何为自举轮播添加缩放效果

1 个答案: