Twitter bootstrap 引导中的旋转木马动画效果

Twitter bootstrap 引导中的旋转木马动画效果,twitter-bootstrap,animation,carousel,Twitter Bootstrap,Animation,Carousel,是否有任何其他默认动画,我们可以添加到引导转盘其他幻灯片。在 我不想要滑动效果。我们可以添加任何其他效果,而无需编写任何额外的代码或动画效果。我们可以使用除滑动效果以外的淡入效果,请尝试以下操作: CSS: HTML: 看看这些:还有 .carousel-fade .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacit

是否有任何其他默认动画,我们可以添加到引导转盘其他幻灯片。在

我不想要滑动效果。我们可以添加任何其他效果,而无需编写任何额外的代码或动画效果。

我们可以使用除滑动效果以外的淡入效果,请尝试以下操作:

CSS:

HTML:


  • 看看这些:还有

    .carousel-fade .carousel-inner .item {
      opacity: 0;
      -webkit-transition-property: opacity;
      -moz-transition-property: opacity;
      -o-transition-property: opacity;
      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;
    }
    
    <div id="Carousel" class="carousel slide carousel-fade col-lg-8 col-offset-2">
            <ol class="carousel-indicators">
                <li data-target="Carousel" data-slide-to="0" class="active"></li>
                <li data-target="Carousel" data-slide-to="1"></li>
                <li data-target="Carousel" data-slide-to="2"></li>
            </ol>
    
            <div class="carousel-inner">
                <div class="item active">
                    <img src="//placehold.it/1300x500" class="img-responsive">
                </div>
               <div class="item">
                 <img src="//placehold.it/1300x500/55EE55" class="img-responsive">
                </div>
               <div class="item">
                 <img src="//placehold.it/1300x500/CCFEFE" class="img-responsive">
                </div>
            </div>
    
            <a class="left carousel-control" href="#Carousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#Carousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
    </div>