CSS3页面切换效果

下载地址

HTML将包含五个主要部门:头和四个部分的内容。每个内容部分有一个ID和类面板。此外,我们将添加另一个部门里面有类内容。第一个内容部分#home 只有类的内容,不需要额外的:

Home

Some content

Portfolio

Some content

About

Some content

Contact

Some content

头我们会有主标题和导航:

Page Transitions with CSS3

• Home
• Portfolio
• About Me
• Contact

原因有这样一个“无序”结构通过添加标题到最后,是我们的导航“可以”使用一般兄弟姐妹选择器(~),这样我们可以颜色各自的项目不同。现在,主要的想法是使用伪类:目标为了添加一个过渡到当前的部分。在这个例子中,我们将上下滑动部分。首先,我们将给我们的头和导航样式。我们想让这些在同一地点,即使一切会移动。#header{ position: absolute; z-index: 2000; width: 235px; top: 50px;}#header h1{ font-size: 30px; font-weight: 400; text-transform: uppercase; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); padding: 20px; background: #000;}#navigation { margin-top: 20px; width: 235px; display:block; list-style:none; z-index:3;}#navigation a{ color: #444; display: block; background: #fff; background: rgba(255,255,255,0.9); line-height: 50px; padding: 0px 20px; text-transform: uppercase; margin-bottom: 6px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 14px;}#navigation a:hover { background: #ddd;}所有的部分,除了#home 内面板类。这里我们将使用过渡元素与该类每次“目标”。添加一个转换将使面板幻灯片从顶部每当一个“选择”:.panel{ min-width: 100%; height: 98%; overflow-y: auto; overflow-x: hidden; margin-top: -150%; position: absolute; background: #000; box-shadow: 0px 4px 7px rgba(0,0,0,0.6); z-index: 2; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; transition: all .8s ease-in-out;}.panel:target{ margin-top: 0%; background-color: #ffcb00;}接下来,让我们风格内容类,我们所有的部分有:.content{ right: 40px; left: 280px; top: 0px; position: absolute; padding-bottom: 30px;}.content h2{ font-size: 110px; padding: 10px 0px 20px 0px; margin-top: 52px; color: #fff; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3);}.content p{ font-size: 18px; padding: 10px; line-height: 24px; color: #fff; display: inline-block; background: black; padding: 10px; margin: 3px 0px;}为了改变当前项在导航的颜色,我们将使用:目标伪类选择器与普通兄弟姐妹“到达”各自的导航项:#home:target ~ #header #navigation #link-home,#portfolio:target ~ #header #navigation #link-portfolio,#about:target ~ #header #navigation #link-about,#contact:target ~ #header #navigation #link-contact{ background: #000; color: #fff;}这是你所需要的。查看演示,您将看到其他的例子,如何做到这一点。希望你喜欢这个教程,也许你可以尝试自己的效果。

dd: