Css 引导传送带-如何在幻灯片之间缓慢衰减
我正在使用最新的引导旋转木马,需要在幻灯片之间慢慢淡出(大约5秒)。我已经看了很多例子,并试图实现这一点。问题是幻灯片之间的淡入度太快(不到一秒钟)。如何将其更改为更长的淡入度 这是我的密码:Css 引导传送带-如何在幻灯片之间缓慢衰减,css,twitter-bootstrap,Css,Twitter Bootstrap,我正在使用最新的引导旋转木马,需要在幻灯片之间慢慢淡出(大约5秒)。我已经看了很多例子,并试图实现这一点。问题是幻灯片之间的淡入度太快(不到一秒钟)。如何将其更改为更长的淡入度 这是我的密码: <div class="carousel slide" id="slideshow-carousel-1" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <!-- S
<div class="carousel slide" id="slideshow-carousel-1" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="item item-1 slide-image active">
<img class="img-responsive bg-item parallax" data-speed="1" data-width="1980" data-height="1485" src="~/images/slideshow/bottle1.png" alt="Slide 1 Background">
<div class="carousel-caption">
<h1 class="title">Caption 1</h1>
</div>
</div>
<!-- End Slide 1 -->
<!-- Slide 2 -->
<div class="item item-2 slide-image">
<img class="img-responsive bg-item parallax" data-speed="1" data-width="1980" data-height="1485" src="~/images/slideshow/bottle2.jpg" alt="Slide 2 Background">
<div class="carousel-caption">
<h1 class="title">Or Bottle!</h1>
</div>
</div>
<!-- End Slide 2 -->
</div>
</div>
正如我已故的、伟大的计算机科学教授常说的那样,这个解决方案非同小可。(引导转盘的衍生产品)在body标签上使用
class=“sld-transition-2”
(三个可用类之一)来设置转盘的转换。这与我试图设置的淡入淡出过渡相冲突。所以它被移除了
@transportedman在此Stackoverflow中提供的CSS3解决方案是关键。我根据我们的要求对其进行了一些修改,并将其放在最后一个CSS文件中,以便为站点加载(覆盖之前的所有内容):
最后但并非最不重要的一点是,修改了carousel DIV标记,使其具有数据间隔
属性,该属性大于上述CSS3中设置的转换持续时间
:
<div class="carousel slide carousel-fade" id="slideshow-carousel-1" data-ride="carousel" data-interval="7000">
.....
</div>
.....
希望这能帮助其他遇到类似问题的人。因为@Turbojohan提供的链接不再有效。下面的代码来自不推荐使用的链接。只需将幻灯片类属性与淡入淡出交换即可
.carousel.fade {
opacity: 1;
}
.carousel.fade .item {
transition: opacity ease-out .7s;
left: 0;
opacity: 0; /* hide all slides */
top: 0;
position: absolute;
width: 100%;
display: block;
}
.carousel.fade .item:first-child {
top: auto;
opacity: 1; /* show first slide */
position: relative;
}
.carousel.fade .item.active {
opacity: 1;
}
在第一行中,只需删除
幻灯片
类:
在css中添加:
.carousel .slide-image.active {
opacity: 1;
transition: opacity 1s ease-in;
}
.carousel .slide-image {
opacity: 0;
display: block;
left: 0;
transition: opacity 1s ease-out;
}
加上这个
transition: opacity ease-out .7s;
在你的课上
.carousel.fade .item
看来
.carousel.fade .item {
transition: opacity ease-out .7s;
}
您可以增加计时使其更慢您是否尝试更改
转换:不透明度0.6s缓进缓出代码>到更长的持续时间?我做了,但并没有因为任何原因影响它。我(个人)不是bootstrap的粉丝;但是,您是否右键单击了已查看的页面检查器,以查看转换中是否存在css属性?
.carousel.fade .item
.carousel.fade .item {
transition: opacity ease-out .7s;
}