css - Bootstrap 3 - 以渐变过渡为背景的旋转木马

Question

我正在尝试使用 Bootstrap Carousel 作为我网站的背景。我成功地添加了标准轮播作为背景，但是所有用于淡入淡出过渡的代码或教程都失败了。这是我现在做的:

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

...

    <div id="myCarousel" class="carousel slide fill" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <div id="first" class="fill"></div>
            </div>

            <div class="item">
                <div id="second" class="fill"></div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="signin-form">
            <form class="form-signin" method="post" id="login-form">
                <h2 class="form-signin-heading" align="center">Login</h2>
                <hr />
                <div id="error" >
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="User" name="user_name" id="user" />
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="Password" name="user_password" id="user_password" />
                </div>
                <hr />
                <div class="form-group">
                    <button type="submit" class="btn btn-default" name="btn-login" id="btn-login">
                        <span class="glyphicon glyphicon-log-in"></span> &nbsp; Accedi
                    </button> 
                </div>
            </form>
        </div>
    </div>


<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

CSS:

    @import url(https://fonts.googleapis.com/css?family=Cherry+Swash);
body, html{
    height:100%;
    margin:0;
    padding:0;
    color:#222;
    font-family: 'Cherry Swash', trebuchet ms, cursive; 
    font-size:1.5em
}
a{color:#930; text-decoration:none}

.form-signin {
    max-width: 500px;
    padding: 19px 29px 29px;
    margin: 20px auto;
    margin-top:1%;
    background-color: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; 
    background-color:rgba(255,255,255,.7);

    border: 1px solid #e5e5e5;
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);

    font-family:Tahoma, Geneva, sans-serif;
    color:#990000;
    font-weight:lighter;

    padding:1em; 
    border-radius:15px; 
    box-shadow:4px 4px 10px 0 rgba(20,20,20,.6); 
    text-shadow: 1px 1px 5px #fff
}

.form-signin .form-signin-heading{
    color:#00A2D1;
}
.form-signin input[type="text"],
.form-signin input[type="password"],
.form-signin input[type="email"] {
    font-size: 16px;
    height: 45px;
    padding: 7px 9px;
}


.signin-form, .body-container
{
    margin-top:110px;
}

#myCarousel{
    position:fixed;
    z-index:-1;
}
.item,.active{
    height:100%;
    -webkit-filter: blur(2px);
}
.carousel-inner{
    height:100%;
    }
.fill{
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover;
}
#first{
    background-image: url('../../images/1.jpg');
}
#second{
    background-image: url('../../images/2.jpg');
}

JS:

$("#myCarousel").carousel({
    interval: 500,
    pause: 'none'
    });

填充类用于使图像适合窗口。

我试过了 this解决方案，但我无法正确运行它，也许问题是由于 .css 困惑并混合了我不需要的东西。我哪里错了？

Answer 1

如果我从随附的代码笔中获取代码并将其应用到您提供的代码中，一切正常，但是，有一些地方需要调整。

carousel-fade 类需要添加到主轮播元素以确保下面的 css 正常工作。

我还增加了 js 文件中的间隔。当保留在 500 时，幻灯片的切换会中断淡入淡出动画，从而导致断断续续的效果。

HTML

<!-- Add 'carousel-fade' class to the carousel element -->
<div id="myCarousel" class="carousel slide fill carousel-fade"> 

CSS(来源:https://codepen.io/transportedman/pen/NPWRGq)

/* Add this to the bottom of your 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;
}

@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);
    }
}

JS

// Change interval to 2000
$("#myCarousel").carousel({
    interval: 2000,
    pause: 'none'
});

工作示例:https://codepen.io/raptorkraine/pen/MEgjwe