- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将轮播中的过渡从从左向右滑动更改为淡入淡出。我找到了多种资源,包括一些关于 SO 的答案,但没有一个对我有用,而且我不太明白我错过了什么。到目前为止,我看到的示例与我看到的示例之间的唯一区别是我在轮播和字幕中包含了图像。实现我在此处提供的答案中找到的代码后:Bootstrap carousel-fade no longer working with maxcdn 3.3.bootstrap.min.css
它没有任何区别,继续滑动而不是褪色。这是我的代码,希望有人能帮我解决这个问题。
HTML
<!-- start -->
<div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" >
<div class="item active">
<img src="images/nightscape3.png" alt="...">
<div class="carousel-caption">
<div class="about-name-div">
<h1 >thin text<span>BOLD TEXT</span></h1>
<p class="lead">THIS IS SOME TEXT</p>
</div>
<a class="btn btn-default" href="#about" role="button" id="aboutButton">LEARN MORE ABOUT US</a>
</div>
</div>
<div class="item">
<img src="images/tech.jpg" alt="...">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end -->
CSS
.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;
}
/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@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);
}
}
最佳答案
我认为你也应该参加 position
( left
) 你的 .item
的考虑。我还向 .anim
添加了一个附加类( <div class="carousel-inner" role="listbox" >
)而不是带有 .carousel
的包装器类。
那么您应该可以使用如下所示的 CSS 代码:
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
.carousel-inner.anim > .item {
left: 0;
}
.carousel-inner.anim > .next,
.carousel-inner.anim > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner.anim > .next.left {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration:0.6s;
animation-duration:0.6s;
}
.carousel-inner.anim > .prev.right {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration:0.6s;
animation-duration:0.6s;
}
.carousel-inner.anim > .active.left {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration:0.6s;
animation-duration:0.6s;
}
.carousel-inner.anim > .active.right {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
-webkit-animation-duration:0.6s;
animation-duration:0.6s;
}
以上适用于 v3.2。演示:http://www.bootply.com/7scRiubjja
从 v3.3 开始,轮播的 Less/CSS 代码已经更改。转换和转换包含在 @media all and (transform-3d), (-webkit-transform-3d) {}
中
要将上述内容用于 v3.3+,您应该使用上述媒体查询重写代码,或重置原始代码。可以使用以下 CSS 代码重置原始代码:
.carousel-inner > .item {
-webkit-transition: none;
transition: none;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item {
-webkit-transition: none;
transition: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
-webkit-transform: none;
-ms-transform: none;
transform: none;
left: 0;
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
-webkit-transform: none;
-ms-transform: none;
transform: none;
left: 0;
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
-webkit-transform: none;
-ms-transform: none;
transform: none;
left: 0;
}
}
演示:http://www.bootply.com/PHBjOgJlIt
基于此处给出的答案Bootstrap carousel-fade no longer working with maxcdn 3.3.bootstrap.min.css你也可以重置:
.carousel-inner.anim > .item {
left: 0;
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important;
}
关于jquery - Bootstrap 旋转木马淡入淡出不适用于图像。需要帮助理解为什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27626096/
我正在尝试剪切和淡出 mp3 文件的最后 4 秒: avconv -i SPEX_pilot_02.mp3 -t 0:0:25 -filter:a fade=t=out:st=21:d=4 prete
我有一个连续的 HTML 元素列表。每个列表项都包含超链接内的图像,如下所示: 当您将鼠标悬停在列表项上时,我本质上想使用 jQuery 淡入包含链接标题的工具提示。因此,当您将
我有一个视频文件和一个音频文件。 我想将它们合并在一起,最终输出的视频将在视频的长度内,并将包含背景中的音频。 我做了: ffmpeg -i output.avi -i bgmusic.mp3 -fi
我有一个生成的超大图表,我将其放入 ScrollView,以便用户可以向右滚动并查看所有值。我想通过淡出 ScrollView 向用户表明右侧还有“更多内容”。通过应用 CAGradientLayer
我目前正在使用此代码来尝试使用具有 .info 类的按钮作为淡入和淡出文本的切换开关。现在动画正在与此代码连续运行。有没有一种方法可以让我单击按钮一次并使文本淡入,而不会在几秒钟后淡出?当您再次单击该
当我的 iPhone 界面旋转时,我想对 UIViewController 的特定 UIView 进行淡入/淡出...就像... - (void)willRotateToInterfaceOrient
所以事情就是这样。我看到这个网站:http://laneandassociates.co/english-mustard-scottish-oats我完全不明白他们是如何做到淡入淡出的。 其淡入淡出效
现在我有这个(只是增加标签的 alpha,中间有小中断): ae.getErrorLabel().setVisible(true); ae.getErr
我在 jQuery 中做了一些简单的 .hover(function() 语句。当我将鼠标悬停在文本上时,我只想要一个 #div.fadeIn,并且在非悬停时淡出。它有效。但这只是如果我发送垃圾邮件悬
我是 jQuery 新手,因此我正在不断学习。 在我创建的网站上,有两个功能似乎相互冲突:第一个功能是当用户开始滚动时网站标题会淡出,第二个功能是在 anchor 之间平滑滚动这一页。第二个脚本使淡出
我使用标题值在单击按钮时显示/隐藏一些 div。第一个按钮将仅显示具有 ab 值的 div,第二个按钮将显示所有 div。一切(有点)都有效,但是当显示所有 div 时,fadeOut/In 会产生令
我试图让一些文本淡出 1000 毫秒,等待 1000 毫秒,将文本更改为数组中的随机条目,然后淡入 1000 毫秒。文本应该在淡出之前不间断地停留 5 秒。 我已经设法更改文本,但我还没有找到如何使其
我收到一条错误消息,如果提交表单并返回错误,则会显示该消息。 表单检查.php jQuery('#error', window.parent.document).html( "There was
我有大约 20 张不同的图像,我想在 4 个框中淡入淡出。我需要它从图像列表中随机选择一个图像并显示它。 框示例 photo1、photo2、photo3、photo4 是它们的名称。它们需要根据其绝
我有一个 ID 为“blog-container”的包含 div,以及其中的一组子 div,其类为“blog-item”。 我想要做的是将“博客容器”中的所有“博客项目”一一淡出,一个接一个,然后以相
我找到并修改了一种创建文本到图像翻转的好方法,在这里:http://jsfiddle.net/pkZAW/12/ $( function() { $("#imglink").hover(
函数检查 session (){ $.ajax({url: "session.php", 成功: 函数(数据){ 如果(数据== 1){ var postFilen = 'msg.php'; $.po
需要一些建议:我想创建一个 fadeIn/fadeOut 脚本,它可以在页面滚动时响应地工作。我想做什么: 滚动时,一旦到达隐藏的 div,它就会淡入。 一旦滚动到达页面顶部,它就会淡出。 任何 fu
当 scrollToTop 超过 1000px 时,我有以下内容应该使 .secondLogo 出现(通过淡入) var secondLogo = $(".secondLogo"); $(window
我有一个音乐脚本,但是当我按下空格又名暂停按钮时,我希望它暂停它已经播放的音乐,但我希望它像 spotify 一样以淡入/淡出的方式播放 这是我到目前为止的代码: var play = true; v
我是一名优秀的程序员,十分优秀!