如何构建功能齐全的纯 CSS3 内容滑块

内容滑块是使网站更具活力的好方法。 它们增加了风格，如果使用得当，可能是购买和后退按钮之间的区别。 通常，它们将使用 jQuery 或其他一些 Javascript 库构建。 然而，随着 CSS3 的出现，我将向您展示如何仅使用 CSS 构建一个。

结果不会是有史以来最语义化的东西，但它仍然是完全可用的。

一些简单的 HTML 开始

		

			
			

			

			

			

			

			

			
			

				

					
					

						
第 1 页

						
Lorem ipsum dolor sit amet，consectur 不管什么。

					

				

				

					
					

						
第2页

						
Lorem ipsum dolor sit amet，consectur 不管什么。

					

				

				

					
					

						
第 3 页

						
Lorem ipsum dolor sit amet，consectur 不管什么。

					

				

				

					
					

						
第 4 页

						
Lorem ipsum dolor sit amet，consectur 不管什么。

					

				

				

					
					

						
第 5 页

						
Lorem ipsum dolor sit amet，consectur 不管什么。

					

				

				

					
					

						
第 6 页

						
Lorem ipsum dolor sit amet，consectur 不管什么。

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

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

我们有一个“ content-slider ” div，它包含所有内容。 我们只需“ margin: 0 auto ”就可以了。

然后，我们有两个部分：“ content ”div 和“ nav ”ul。 content div 是我们所有页面的内容，而“nav” ul 是允许我们访问不同页面的内容。

现在，在“content”div 中，您会注意到 6 个嵌套的 div：“ content-inner-1 ”到“ content-inner-6 ”。 这 6 个 div 将使所有的魔法工作，我将在稍后解释具体如何。

神奇的 CSS

 #内容滑块{
字体系列：arial；
宽度：640 像素；
边距：0 自动；
边距顶部：100px；
}

＃内容 {
溢出：隐藏；
宽度：640 像素；
高度：480px；
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
盒子阴影：0px 0px 50px 10px #c9c9c9;
}

#内容内部{
宽度：10000 像素；
高度：480px；
}

。页 {
宽度：640 像素；
高度：480px；
向左飘浮;
}

正如我所说，我们对“ content-slider ” div 所做的只是将其居中，并将其从页面顶部移动 100 像素。

“ content ” div 样式非常重要。 我们将其“溢出”设置为“隐藏”——这确保幻灯片在被选中之前是不可见的。

现在，“ content-inner ” div 包含所有页面。 这就是它的宽度为 10,000 像素的原因。 通常，javascript 会给它正确的宽度，但在这种情况下，我们没有使用 Javascript。

页面有宽度和高度，它们浮动到左侧并排。

现在，我们有了一些通用样式。 我们将为“ page-info ”和“ nav ”设置样式。

 .页面信息{
高度：90px；
背景色：rgba(99, 99, 99, 0.6);
位置：相对；
边距顶部：0px；
底部：103px；
颜色：#dedede;
填充左：20px；
上边距：10px；
}

.page-info h2 {
字体大小：21px；
边距底部：10px；
边距顶部：0px；
颜色：#fafafa；
}

.page-text {
字体大小：15px；
}

如您所见，它只是一些简单的样式，使页面信息半透明并使文本清晰易读。

接下来，我们将为按钮添加一些漂亮的 CSS3 样式。

 。按钮 {
向左飘浮;
背景：#bababa；
宽度：16px；
高度：16px；
-webkit-border-radius：8px；
-moz-边界半径：8px；
边框半径：8px；
左边距：5px；
右边距：5px；
}

.按钮：悬停{
-webkit-box-shadow: 插入 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: 插入 0px 0px 2px 2px #d4d4d4;
盒子阴影：插图 0px 0px 2px 2px #d4d4d4;
}

.按钮：活动{
-webkit-box-shadow: 插入 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: 插入 0px 0px 2px 2px #7a7a7a;
盒子阴影：插图 0px 0px 2px 2px #7a7a7a;
}

.按钮一个{
显示：块；
宽度：16px；
高度：16px；
}

我们把按钮做成圆圈，并给它们嵌入阴影以增加一些视觉效果。

最后，我们将添加魔法成分。 然而，在此之前，我将解释这一切是如何工作的。

使用 CSS3 :target pseudo-selector ，我们可以对 url 中的元素进行样式设置。 例如：

 ＃例子 {
可见性：隐藏；
}

#示例：目标{
能见度：可见；
}

现在，如果我们在诸如“http://www.example.com/index.html #example ”之类的 URL 上，将应用上面的“:target”样式。 在这种情况下，“示例” div 将是可见的。

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

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

这是代码：

 #content-inner-1：目标 #content-inner {
-webkit-transition：全部 400ms 轻松；
-moz-transition：全部 400ms 轻松；
-o-transition：所有 400 毫秒缓和；
过渡：全部 400ms 缓动；
左边距：0px；
}

#content-inner-2：目标 #content-inner {
-webkit-transition：全部 400ms 轻松；
-moz-transition：全部 400ms 轻松；
-o-transition：所有 400 毫秒缓和；
过渡：全部 400ms 缓动；
左边距：-640px；
}

#content-inner-3：目标 #content-inner {
-webkit-transition：全部 400ms 轻松；
-moz-transition：全部 400ms 轻松；
-o-transition：所有 400 毫秒缓和；
过渡：全部 400ms 缓动；
左边距：-1280px；
}

#content-inner-4:target #content-inner {
-webkit-transition：全部 400ms 轻松；
-moz-transition：全部 400ms 轻松；
-o-transition：所有 400 毫秒缓和；
过渡：全部 400ms 缓动；
左边距：-1920px；
}

#content-inner-5：目标 #content-inner {
-webkit-transition：全部 400ms 轻松；
-moz-transition：全部 400ms 轻松；
-o-transition：所有 400 毫秒缓和；
过渡：全部 400ms 缓动；
左边距：-2560px；
}

#content-inner-6：目标 #content-inner {
-webkit-transition：全部 400ms 轻松；
-moz-transition：全部 400ms 轻松；
-o-transition：所有 400 毫秒缓和；
过渡：全部 400ms 缓动；
左边距：-3200px；
}

结论

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

“content-inner” div 是每个“ content-inner-[number] ” div 的子元素，因此当这些“ content-inner-[number] ” div 中的任意 6 个是:targeted时，我们可以设置“ content-inner相应的content-inner ” div。

由于每个页面都是 640px 宽，我们只需将“ content-inner ”div 的 margin-left 设置为 640 的倍数。

为了使这些“ :target ”样式起作用，我们必须有指向它们的链接。 因此，页面下方的“ nav ”ul。

为了真正为“ content-inner ”设置动画，我们给它通常的 CSS3 动画属性，当然还有供应商前缀。

好吧，你有它：一个功能齐全但非语义的内容滑块。