bootstrap轮播图原点变为⽅块_BootStrap4轮播图实现缩放效
果智慧宫
BootStrap 4 Carousel 轮播图官⽅代码中，图⽚只有左右滚动效果，在最新的BootStrap 4.3版本 Carousel 效果增加了淡⼊淡出，但是远远不能满⾜我们的需求，下⾯提供⼀种 BootStrap 4 轮播图缩放效果的代码， 使⽤CSS动画实现实现，代码未使⽤Javascript，所以⾮常简单有效。
Bootstrap 4 轮播图 HTML 基本结构
BootStrap 4 Carousel 轮播图基本HTML代码结构如下：/**
* HTML 基本结构
*
* @author 智慧宫
*/
CSS 3 动画代码
将以下 CSS 代码添加到style⽂件中，或者放在
标签内，在 基本 HTML结构第⼀⾏的class中添加 carousel-scale即可。/**
* CSS 3 动画样式
*
* @author 智慧宫
*/
.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 {
html滚动效果代码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 轮播图淡⼊淡出，上下滚动效果 查看但如淡出效果和上下滚动效果， 同时您可以发挥想象⼒， 将这些效果可以组合使⽤，建造炫酷的轮播图效果 。
效果演⽰

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。