BootStrap 4 轮播图实现缩放效果

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

Bootstrap 4 轮播图 HTML 基本结构

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

/**
* HTML 基本结构
*
* @author 智慧宫
* @link   https://lerm.net
*/
<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中添加carousel-scale即可。

/**
* CSS 3 动画样式
*
* @author 智慧宫
* @link   https://lerm.net
*/
.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 轮播图淡入淡出，上下滚动效果 查看但如淡出效果和上下滚动效果， 同时您可以发挥想象力， 将这些效果可以组合使用，建造炫酷的轮播图效果 。

效果演示

Leave a Reply

VisitorWelcome