带有 CSS 和 HTML 的白色幻灯片过渡答案

【问题标题】：White slide transition with CSS and HTML带有 CSS 和 HTML 的白色幻灯片过渡
【发布时间】：2015-05-12 11:11:40
【问题描述】：

我只是想知道当我单击网站右侧的按钮时如何制作动画以滑到另一个页面。我希望黑色的页眉和页脚保持完整，但是当单击按钮时在右侧，我希望空白区域滑动到下一页。

另外，当我将鼠标悬停在按钮上时，如何让文本出现，我似乎无法实现？

这是我的代码，供任何希望提供帮助的人使用

CSS：

html {
    height: 100%;
    font-family: volkorn;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    margin-bottom: 50px;
}

/* Top Black Section */
.top-bar {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: black;
    top: 0px;
    left: 0px;
}
/* Top Black Section */

/* White Area */
.white-content {
    margin-top: 50px;
}
/* White Area */

/* Bottom Black Section */
.bottom-bar {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: black;
    bottom: 0px;
    left: 0px;
}
/* Bottom Black Section */

.ulogo {
    position: fixed;
    height: 40%; 
    background-color: transparent;
    top: 250px; 
    text-align: center;

}
/* Bottom Black Section */

/* Right Navigation */
.right-nav {
    position: fixed;
    right: 0px;
    top: calc(50% - 120px);
}
.right-nav div {
    font-size: 3em;
    color: #C0C0C0 ;
    transition: color .3s;
    cursor: pointer;
}

.right-nav div:hover {
    color: #404040;
}




/* Right Navigation */

HTML：

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<title>Upload Festival</title>  
    <head> 
    <!-- CSS -->
    <link href="css/customization.css" rel="stylesheet" style="text/css">
    <!-- CSS -->

    <!-- jQuery&WebFont -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
    <!-- jQuery&WebFont -->
  </head>

<body class="index">
    <!-- Top Border -->
<div class="top-bar"></div>
<!-- Top Border --> 

<!-- White Content -->
<div class="white-content"></div>
<!-- White Content -->

<!-- Bottom Bar -->
<div class="bottom-bar"></div>
<!-- Bottom Bar -->


<!--Buttons-->
<div class="right-nav">
<div id="b1">&bull;</div>
<div id="b2">&bull;</div>
<div id="b3">&bull;</div>
<div id="b4">&bull;</div>
</div>
<!--Buttons-->

<!--Logo div-->
<div class="logo"></div>
<!--Logo div-->

<!--Transition Section-->
<div class="slider"></div>
<!--Transition Section-->

<!-- Logo - Left -->
<img class ="ulogo" src="images/upload-logo.png">
<!-- Logo - Left -->
</body>
</html>

【问题讨论】：

你能把这些都放在js fiddle里吗？这可以通过锚链接触发器来完成。我可以告诉你如果你可以把代码放在小提琴上
没问题 - jsfiddle.net/kLunbwqo
感谢您的帮助@nolawipetros
请把相关代码放在fiddle中。你的导航部分在哪里？你的目标是什么？它是另一个 html DOM 元素还是完全不同的页面？我看到你已经在“div”中放置了一个悬停伪类，但是然后呢？简而言之，您到底尝试了什么？
jsfiddle.net/kLunbwqo/1 - 我的目标是保持相同的页面，我不想要一个完全不同的页面，我只希望白色部分的内容，如文本、图像等过渡到另一个部分，当我单击一个按钮时，它上面有内容，但只是让它在空白处改变，没有其他地方。

标签： html css transition slide

【解决方案1】：

您可以使用单选按钮和同级 CSS 选择器来做到这一点。基本思想是将按钮和幻灯片放在同一个容器中，使它们成为兄弟。

单选按钮可能看起来像：

<label class="radiolabel b1" for="b1">&bull;</label>
<input type="radio" id="b1" name="nav-buttons" class="button-radio" />

按钮标签仍然可以定位在您现在拥有导航区域的位置。

然后您将内容放入幻灯片容器中，例如：

<div class="slide slide1">...content... </div>

第二类编号递增的地方。

然后将它们放置在屏幕外：

.slide {
    position: absolute;
    width: 100%;
    top: 0;
    left: -100%;
    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    -ms-transition: left 1s;
    transition: left 1s;
}

现在您可以将它们绑定到如下按钮：

#b1:checked ~ .slide1 {
    left: 0;
}

因此，在这种情况下，当第一个单选按钮被选中时，第一张幻灯片就会移动到屏幕上。

还有一些其他 HTML 和 CSS 您需要根据需要进行调整。

我在this Fiddle做了一个简单粗暴的例子

【讨论】：

【解决方案2】：

我不知道这是否正是你想要的，因为我的英语不好......对不起。这里是fiddle

我在你的小提琴中添加了一些 JS：

jQuery( document ).ready(function( $ ) {
$('.right-nav div').click(function() {
    var id = $(this).attr('id');
    $('.slide').removeClass('active');
    if ( id == 'b1' ) {
        $('.sl1').addClass('active');
    }
    else if ( id == 'b2' ) {
        $('.sl2').addClass('active');
    }
    else if ( id == 'b3' ) {
        $('.sl3').addClass('active');
    }
});
});

还有一些 CSS 给你的：

.slider {
    position: relative;
}
.slider .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all 1s ease;
}

.slider .slide.sl1 {
        margin-left:100%;    
}
.slider .slide.sl2 {
        margin-left: 200%;    
}
.slider .slide.sl3 {
        margin-left: 300%;
}
.slider .slide.active {
    margin-left: 0;
}

【讨论】：

这就是我想要的，但我的意思是我希望整个空白区域都可以移动到我想要放置的新内容中
对不起，我不明白你想要什么（我的英语太糟糕了:((()
别担心！感谢您的尝试！