CSS 和 HTML 的白色幻灯片过渡

Question

我只是想知道当我单击 website.I 按钮右侧的按钮时如何制作动画以滑到另一页 website.I 希望黑色的页眉和页脚保持完整，但是当单击右侧的按钮我希望白色 space 滑动到下一页。

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

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

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>

Answer 1

我不知道这是否正是您想要的，因为我的英语不好...抱歉。这里是fiddle

我给你的 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;
}

Answer 2

您可以使用单选按钮和同级 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>

其中第二个 class 数字递增。

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

.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

中做了一个简单的例子

CSS 和 HTML 的白色幻灯片过渡

White slide transition with CSS and HTML

html

css

transition

slide