石家庄公司网站建设:如何构建功能齐全的CSS 3内容滑翔机

2019.06.03 石家庄公司网站建设

102

内容滑块是一个伟大的方式,使一个网站更动态。石家庄公司网站建设他们添加了天赋,如果使用正确,可能是购买和后退按钮之间的区别。通常,它们是用jQuery或其他Javascript库构建的。然而,随着CSS 3的出现,我将向您展示如何只使用CSS来构建CSS。

结果不会是最有语义的东西,但它将是完全功能的。

石家庄公司网站建设

一些简单的HTML开始

<div id="content-slider">
		<div id="content">
			
			<div id="content-inner-1">
			<div id="content-inner-2">
			<div id="content-inner-3">
			<div id="content-inner-4">
			<div id="content-inner-5">
			<div id="content-inner-6">
			
			<div id="content-inner">
				<div class="page" id="page1">
					
					<div class="page-info" id="info1">
						<h2>Page 1<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page2">
					
					<div class="page-info" id="info2">
						<h2>Page 2<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page3">
					
					<div class="page-info" id="info3">
						<h2>Page 3<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page4">
					
					<div class="page-info" id="info4">
						<h2>Page 4<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page5">
					
					<div class="page-info" id="info5">
						<h2>Page 5<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
				<div class="page" id="page6">
					
					<div class="page-info" id="info6">
						<h2>Page 6<h2>
						<div class="page-text">Lorem ipsum dolor sit amet, consectur whatever blah.<div>
					<div>
				<div>
			<div>		
		
		<div>
		<div>
		<div>
		<div>
		<div>
		<div>
		
		<div>
		
		<ul id="nav">
			<li class="button" id="button1"><a href="#content-inner-1"><a><li>
			<li class="button" id="button2"><a href="#content-inner-2"><a><li>
			<li class="button" id="button3"><a href="#content-inner-3"><a><li>
			<li class="button" id="button4"><a href="#content-inner-4"><a><li>
			<li class="button" id="button5"><a href="#content-inner-5"><a><li>
			<li class="button" id="button6"><a href="#content-inner-6"><a><li>
		<ul>
	<div>

当然,这看起来很吓人。非常可怕。记住,这不是地球上最语义的东西。现在让我解释一下。

我们有一个“content-slider“DIV,它保存所有的内容。我们只是“margin: 0 auto“别想了。

然后,我们有两个部分:“content“DIV和”nav“呃。内容div是保存我们所有页面的内容,“nav”ul允许我们访问不同的页面。

现在,在“content”div内部,您将注意到6个嵌套div:“content-inner-1“通过”content-inner-6“这6个div将使所有的魔术工作,我将确切地解释如何稍后。

魔法CSS

#content-slider {
font-family: arial;
width: 640px;
margin: 0 auto;
margin-top: 100px;
}

#content {
overflow: hidden;
width: 640px;
height: 480px;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
box-shadow: 0px 0px 50px 10px #c9c9c9;
}

#content-inner {
width:10000px;
height: 480px;
}

.page {
width: 640px;
height: 480px;
float: left;
}

就像我说的,我们对“content-slider“div是它的中心,并将它从页面顶部移动到100 px。

content“div造型非常重要。我们将其“溢出”设置为“隐藏”-这将确保幻灯片在选定之前是不可见的。

现在,“content-inner“div保存了所有的页面。这就是为什么它的宽度为10,000 px。通常,javascript会给它适当的宽度,但是在本例中,我们没有使用Javascript。

页面有一个宽度和一个高度,它们被向左浮动以并排。

现在,我们石家庄公司网站建设有一些通用的造型。我们会把“page-info,以及“nav“.

.page-info {
height: 90px;
background-color: rgba(99, 99, 99, 0.6);
position: relative;
margin-top: 0px;
bottom: 103px;
color: #dedede;
padding-left: 20px;
padding-top: 10px;
}

.page-info h2 {
font-size: 21px;
margin-bottom: 10px;
margin-top: 0px;
color: #fafafa;
}

.page-text {
font-size: 15px;
}

正如你所看到的,它只是一些简单的样式,使页面信息半透明,并使文本清晰。

接下来,我们将添加一些漂亮的CSS 3样式到按钮。

.button {
float: left;
background: #bababa;
width: 16px;
height: 16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-left: 5px;
margin-right: 5px;
}

.button:hover {
-webkit-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
box-shadow: inset 0px 0px 2px 2px #d4d4d4;
}

.button:active {
-webkit-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
box-shadow: inset 0px 0px 2px 2px #7a7a7a;
}

.button a {
display: block;
width: 16px;
height: 16px;
}

我们做了按钮圈,并给他们嵌入的阴影,以添加一些眼睛糖果。

最后,我们将加入神奇的配料。然而,在此之前,我将解释这一切是如何工作的。

使用CSS 3:target pseudo-selector,我们可以对url中的元素进行样式化。例如:

#example {
visibility: hidden;
}

#example:target {
visibility: visible;
}

现在,如果我们在像“http://www.example.com/index.html”这样的url#例,上面的“目标”样式将被应用。在这种情况下,“示例”div将是可见的。

使用这个概念,我们可以模仿javascript单击函数。如果用户点击在指向“http://www.example.com/index.html#example”的链接上,样式将应用于“示例”。

在这种情况下,我们将使用“:Target”来使内容滑块工作。当用户点击导航中的六个按钮中的任何一个时,“内容-内部”将滑到适当的位置,就像javascript版本一样。

下面是代码:

#content-inner-1:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: 0px;
}

#content-inner-2:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -640px;
}

#content-inner-3:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1280px;
}

#content-inner-4:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1920px;
}

#content-inner-5:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -2560px;
}

#content-inner-6:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -3200px;
}

结语

我们有6“content-inner-[number]“div,每个div对应于一个页面。6页是6页。

“内容-内部”div是每个“content-inner-[number]“DIV,所以当其中的任何6个”content-inner-[number]“DVS是:targeted,我们可以用“content-inner“按此分配。

由于每一页的宽度为640 px,我们只需设置content-inner“除以640的倍数。

制造这些“:target“样式工作,我们必须有指向他们的链接。因此,“nav“在书页下面。

为了真正动画片content-inner“,我们给它通常的CSS 3动画属性,当然有供应商前缀。

好吧,有了它:一个功能齐全的,尽管不是语义的内容滑块。


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP