Question

我正在使用Slick Slider创建产品图片轮播。我将所有幻灯片设置为灰度，然后将当前幻灯片设置为稍大和全彩色，这部分有效。

我想使其更加平滑。与其跳到全彩并变大，不如如何减轻它？如果颜色从灰色变为全彩色，并且尺寸逐渐变大，那就太好了。（然后在没有当前幻灯片的情况下以相反的方向工作）

有可能吗？

将slick-current类作为活动幻灯片添加到幻灯片中。

.category-gallery .slick-slide {
    zoom:1;
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: grayscale(100%); /* Current draft standard */
}

.category-gallery .slick-current {
    zoom:1.3!important;
    -webkit-filter: grayscale(0)!important; /* Old WebKit */
    -webkit-filter: grayscale(0%)!important; /* New WebKit */
    filter: grayscale(0%)!important; /* Current draft standard */
}

Answer 1

使用scale()而不是zoom。然后，您可以使用transition为属性更改设置动画。

我在这里使用:hover模拟类更改：

.category-gallery .slick-slide {
  transform: scale(1);
  filter: grayscale(100%);
  text-align: center;
  transition: all 1s ease;
}

.category-gallery .slick-slide:hover {
  transform: scale(1.3);
  filter: grayscale(0%);
}

<div class='category-gallery'>
  <div class="slick-slide">
    <img src="http://placekitten.com/200/300">
  </div>
</div>

轻松制作全彩动画并缩放图像

1 个答案: