bootstrap轮播图 原点变为方块_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

*/

CSS 3 动画代码

将以下 CSS 代码添加到style文件中，或者放在

标签内，在 基本 HTML结构第一行的class中添加 carousel-scale即可。/**

* 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 轮播图淡入淡出，上下滚动效果 查看但如淡出效果和上下滚动效果， 同时您可以发挥想象力， 将这些效果可以组合使用，建造炫酷的轮播图效果 。

效果演示