如何構建功能齊全的純 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 動畫屬性，當然還有供應商前綴。

好吧，你有它：一個功能齊全但非語義的內容滑塊。