我正在尝试使用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> 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陷入困境并且混合了一些我不需要的东西。哪里我错了?
答案 0 :(得分:0)
如果我从附加的codepen中获取代码并将其应用到您提供的代码中,则一切正常,但是,有几个位需要调整。
carousel-fade
类需要添加到主carousel元素以确保以下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'
});