css Bootstrap - 褪色旋转木马
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css Bootstrap - 褪色旋转木马相关的知识,希望对你有一定的参考价值。
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
以上是关于css Bootstrap - 褪色旋转木马的主要内容,如果未能解决你的问题,请参考以下文章
css Bootstrap褪色旋转木马
scss 旋转木马褪色而不是闪光
css Bootstrap淡化旋转木马触摸滑块与文本动画
悬停的Bootstrap旋转木马标题
html Bootstrap推荐旋转木马
我如何将我的旋转木马放在中心位置?