BootStrap 4 轮播图实现缩放效果

BootStrap 4 Carousel 轮播图官方代码中,图片只有左右滚动效果,在最新的BootStrap 4.3版本 Carousel 效果增加了淡入淡出,但是远远不能满足我们的需求,下面提供一种 BootStrap 4 轮播图缩放效果的代码, 使用CSS动画实现实现,代码未使用Javascript,所以非常简单有效。

Bootstrap 4 轮播图 HTML 基本结构

BootStrap 4 Carousel 轮播图基本HTML代码结构如下:

/**
* HTML 基本结构
*
* @author 智慧宫
* @link   https://www.hanost.com
*/
<div id="carouselExampleSlidesOnly" class="carousel slide carousel-scale" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

CSS 3 动画代码

将以下 CSS 代码添加到style文件中,或者放在<head>标签内,在 基本 HTML结构第一行的class中添加<strong>carousel-scale</strong>即可。

/**
* CSS 3 动画样式
*
* @author 智慧宫
* @link   https://www.hanost.com
*/
.carousel-scale .carousel-item img{
 -webkit-transform: scale(1.12);
  transform: scale(1.12);
}
.carousel-scale .carousel-item.active img {
 -webkit-animation: scaleUpDown 6s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940);
 animation: scaleUpDown 6s forwards cubic-bezier(0.250, 0.460, 0.450, 0.940);
}
@-webkit-keyframes scaleUpDown {
 from {
  -webkit-transform: scale(1.12);
  transform: scale(1.12);
 }
 to {
  -webkit-transform: scale(1);
  transform: scale(1);
 }
}
@keyframes scaleUpDown {
 from {
  -webkit-transform: scale(1.12);
  transform: scale(1.12);
 }
 to {
  -webkit-transform: scale(1);
  transform: scale(1);
 }
}

此样式中使用了CSS 3 动画属性中的scale ,实现缩放效果,您可以通过改变scale(1.12)的值实现您需要的缩放效果;

您可以查阅本站文章: Bootstrap 4 轮播图淡入淡出,上下滚动效果 查看但如淡出效果和上下滚动效果, 同时您可以发挥想象力, 将这些效果可以组合使用,建造炫酷的轮播图效果 。

效果演示

发表评论

#