如何用html與css3來實現slider切換效果

最近在學習html與cs經過一段時間的學習，感到cs實在是太強大了：

一下是用純html與cs實現的slider切換效果

html結構的：

description1

description2

description3

description4

description5

cs結構的**：

@charset utf-8; 

/* common */ 

body 

#bd 

/* module: sliders */ 

#sliders 

#overflow 

#sliders .inner 

#sliders article 

#sliders article .info 

#sliders article .info h1 

#sliders article .info a 

/* module: controls */ 

#controls 

#controls label 

#controls label:hover 

/* module: active */ 

#active 

#active label 

#active label:hover 

/* input checked change style */ 

#slider1:checked ~ #active label:nth-child(1), 

#slider2:checked ~ #active label:nth-child(2), 

#slider3:checked ~ #active label:nth-child(3), 

#slider4:checked ~ #active label:nth-child(4), 

#slider5:checked ~ #active label:nth-child(5) 

#slider1:checked ~ #controls label:nth-child(5), 

#slider2:checked ~ #controls label:nth-child(1), 

#slider3:checked ~ #controls label:nth-child(2), 

#slider4:checked ~ #controls label:nth-child(3), 

#slider5:checked ~ #controls label:nth-child(4) 

#slider1:checked ~ #controls label:nth-child(2), 

#slider2:checked ~ #controls label:nth-child(3), 

#slider3:checked ~ #controls label:nth-child(4), 

#slider4:checked ~ #controls label:nth-child(5), 

#slider5:checked ~ #controls label:nth-child(1) 

#slider1:checked ~ #sliders article:nth-child(1) .info, 

#slider2:checked ~ #sliders article:nth-child(2) .info, 

#slider3:checked ~ #sliders article:nth-child(3) .info, 

#slider4:checked ~ #sliders article:nth-child(4) .info, 

#slider5:checked ~ #sliders article:nth-child(5) .info 

#slider1:checked ~ #sliders .inner 

#slider2:checked ~ #sliders .inner 

#slider3:checked ~ #sliders .inner 

#slider4:checked ~ #sliders .inner 

#slider5:checked ~ #sliders .inner{ 

margin-left: -400%; 

嗯就是這自己吧

如何用css3實現簡單旋轉的風車

如何用css3實現簡單旋轉的風車 在dw中想要實現旋轉的風車就要使用關鍵幀keyframes來設定旋轉，其實也沒什麼難度的。先設定它的樣式，然後要用定位把它放到合適的位置就可以了。html的 如下 class fengche class zhu div class zhuan class z div...

如何用css3實現switch元件開關的方法

基於表單的checkbox 效果圖原理 checkbox,有兩種狀態,沒選中和選中,當選中的時候 checked 改變樣式即可,首先得清除瀏覽器預設的樣式,apperance none,本文 只在chrome中執行,如果需要寫相容性 給apperance和transition加上字首就好 html ...

如何用css3做openLayers3的閃爍效果

最近在做地圖上的乙個故障指示器，要求有故障時，此指示器會呈現不同的展現樣式，用閃爍最好了！但openlayers3中沒有閃爍的效果，所以就借助css3的動畫效果了，反正openlayers3也是使用了h5 css的，它們通用。最終的效果是 第一步 在你的地圖html檔案中加乙個div 就這麼一條哦！...