纯CSS3实现的图片滑块程序，效果非常酷

接下来我们一起来分析一下源码，首先是HTML代码，非常简单：

1. <div id="gal">
2. <nav class="galnav">
3. <ul>
4. <li><input type="radio" name="btn" value="one" checked="checked" />
5. <label for="btn"></label>
6. <figure>
7. <img src="data:images/01_Fabio_Basile.jpg" />
8. <figcaption>
9. <h4>Fabio Basile</h4>
10. <nav role='navigation'>
11. <p>iPhone 6 Infinity</p>
12. <ul>
13. <li><a href="#" class="entypo-dribbble">
14. </a></li>
15. <li><a href="#" class="entypo-twitter"></a>
16. </li>
17. </ul>
18. </nav>
19. </figcaption>
20. </figure>
21. </li>
22. <li><input type="radio" name="btn" value="two" /> <label for="btn">
23. </label>
24. <figure class="entypo-forward">
25. <img src="data:images/08_Brian_Miller.jpg" />
26. <figcaption>
27. <h4>Brian Miller</h4>
28. <nav role='navigation'>
29. <p>TypeTi.me</p>
30. <ul>
31. <li><a href="#" class="entypo-dribbble"></a>
32. </li>
33. <li><a href="#" class="entypo-twitter"></a>
34. </li>
35. </ul>
36. </nav>
37. </figcaption>
38. </figure>
39. </li>
40. <li><input type="radio" name="btn" value="three" /> <label for="btn">
41. </label>
42. <figure class="entypo-forward">
43. <img src="data:images/05_Nicolas_Quod.jpg" />
44. <figcaption>
45. <h4>Nicolas Quod</h4>
46. <nav role='navigation'>
47. <p>Iphone 6 - Notification - iOS 7</p>
48. <ul>
49. <li>
50. <a href="#" class="entypo-dribbble">
51. </a></li>
52. <li>
53. <a href="#" class="entypo-twitter">
54. </a></li>
55. </ul>
56. </nav>
57. </figcaption>
58. </figure>
59. </li>
60. <li><input type="radio" name="btn" value="four" /> <label for="btn">
61. </label>
62. <figure class="entypo-forward">
63. <img src="data:images/04_Joffrey.jpg" />
64. <figcaption>
65. <h4>Joffrey</h4>
66. <nav role='navigation'>
67. <p>鈻?/p> </p>
68. <ul>
69. <li><a href="#" class="entypo-dribbble">
70. </a></li>
71. <li><a href="#" class="entypo-twitter">
72. </a></li>
73. </ul>
74. </nav>
75. </figcaption>
76. </figure>
77. </li>
78. <li><input type="radio" name="btn" value="five" /> <label for="btn">
79. </label>
80. <figure class="entypo-forward">
81. <img src="data:images/09_Jared_Long.jpg" />
82. <figcaption>
83. <h4>Jared Long</h4>
84. <nav role='navigation'>
85. <p>Don't drop your iPhone Infinity</p>
86. <ul>
87. <li>
88. <a href="#" class="entypo-dribbble">
89. </a></li>
90. <li>
91. <a href="#" class="entypo-behance">
92. </a></li>
93. </ul>
94. </nav>
95. </figcaption>
96. </figure>
97. </li>
98. <li><input type="radio" name="btn" value="six" /> <label for="btn">
99. </label>
100. <figure class="entypo-forward">
101. <img src="data:images/02_Charles_Treece.jpg" />
102. <figcaption>
103. <h4>Charles Treece</h4>
104. <nav role='navigation'>
105. <p>iPhone 6 Infinity Side Status Bar</p>
106. <ul>
107. <li>
108. <a href="#" class="entypo-dribbble">
109. </a></li>
110. <li>
111. <a href="#" class="entypo-twitter">
112. </a></li>
113. </ul>
114. </nav>
115. </figcaption>
116. </figure>
117. </li>
118. </ul>
119. </nav>
120. </div>

复制代码

些HTML代码只是构造了几张图片，等一下可以切换。另外，每张图片都放置一个radio，这个radio来充当切换按钮。

接下来就是CSS代码了:

1. *, *:before, *:after {
2. margin:0;
3. padding:0;
4. -webkit-box-sizing:border-box;
5. -moz-box-sizing:border-box;
6. box-sizing:border-box;
7. }
8. #gal {
9. position:relative;
10. width:600px;
11. height:300px;
12. margin:0 auto;
13. top:100px;
14. background:white;
15. -webkit-box-shadow:0px 0px 0px 10px white,
16. 5px 5px 0px 10px rgba(0,0,0,0.1);
17. -moz-box-shadow:0px 0px 0px 10px white,
18. 5px 5px 0px 10px rgba(0,0,0,0.1);
19. box-shadow:0px 0px 0px 10px white,
20. 5px 5px 0px 10px rgba(0,0,0,0.1);
21. -webkit-transform:translate3d(0, 0, 0);
22. -moz-transform:   translate3d(0, 0, 0);
23. -ms-transform:    translate3d(0, 0, 0);
24. -o-transform:     translate3d(0, 0, 0);
25. transform:        translate3d(0, 0, 0);
26. }
27. #gal:after {
28. content:'';
29. position:absolute;
30. bottom:24px;
31. right:0;
32. left:0;
33. width:100%;
34. height:1px;
35. background:rgba(255,255,255,0.35);
36. z-index:3;
37. }
38. #gal ul {list-style-type:none;}
39. input[type="radio"], input[type="radio"] + label {
40. position:absolute;
41. bottom:15px;
42. display:block;
43. width:20px;
44. height:20px;
45. -webkit-border-radius:50%;
46. -moz-border-radius:50%;
47. border-radius:50%;
48. cursor:pointer;
49. }
50. input[type="radio"] {
51. opacity:0;
52. z-index:9;
53. }
54. input[value="one"], input[value="one"] + label {left:20px;}
55. input[value="two"], input[value="two"] + label {left:128px;}
56. input[value="three"], input[value="three"] + label {left:236px;}
57. input[value="four"], input[value="four"] + label {left:344px;}
58. input[value="five"], input[value="five"] + label {left:452px;}
59. input[value="six"], input[value="six"] + label {right:20px;}
60. input[type="radio"] + label {
61. background:rgba(255,255,255,0.35);
62. z-index:7;
63. -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
64. -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
65. box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
66. -webkit-transition:all .3s;
67. -moz-transition:all .3s;
68. -o-transition:all .3s;
69. transition:all .3s;
70. }
71. [class*="entypo-"]:before {
72. position:absolute;
73. font-family: 'entypo', sans-serif;
74. }
75. figure[class*="entypo-"]:before {
76. left:10px;
77. top:5px;
78. font-size:2rem;
79. color:rgba(255,255,255,0);
80. z-index:1;
81. -webkit-transition:color .1s;
82. -moz-transition:color .1s;
83. -o-transition:color .1s;
84. transition:color .1s;
85. }
86. a[class*="entypo-"]:before {
87. top:8px;
88. left:9px;
89. font-size:1.5rem;
90. color:white;
91. }
92. a:hover[class*="entypo-"]:before {
93. color:white;
94. }
95. figure, figure img, figcaption {
96. position:absolute;
97. top:0;
98. right:0;
99. }
100. figure {
101. bottom:0;
102. left:0;
103. width:600px;
104. height:300px;
105. display:block;
106. overflow:hidden;
107. }
108. figure img {
109. bottom:0;
110. left:0;
111. display:block;
112. width:600px;
113. height:300px;
114. z-index:1;
115. -webkit-transform:translateX(600px);
116. -moz-transform:translateX(600px);
117. -ms-transform:translateX(600px);
118. -o-transform:translateX(600px);
119. transform:translateX(600px);
120. -webkit-transition:all .15s .15s, z-index 0s;
121. -moz-transition:all .15s .15s, z-index 0s;
122. -o-transition:all .15s .15s, z-index 0s;
123. transition:all .15s .15s, z-index 0s;
124. }
125. figcaption {
126. display:block;
127. width:270px;
128. height:300px;
129. padding-top:20px;
130. background-image:radial-gradient(rgba( 255,255,255,0.3), transparent);
131. background-size:600px 600px;
132. background-repeat:no-repeat;
133. background-position:-300px -150px;
134. text-align:center;
135. z-index:3;
136. -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
137. -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
138. box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
139. -webkit-transform:translateX(300px);
140. -moz-transform:translateX(300px);
141. -ms-transform:translateX(300px);
142. -o-transform:translateX(300px);
143. transform:translateX(300px);
144. -webkit-transition:all .35s;
145. -moz-transition:all .35s;
146. -o-transition:all .35s;
147. transition:all .35s;
148. }
149. h4 {
150. display:inline-block;
151. padding:0 15px;
152. color:white;
153. font-family: 'Titillium Web', sans-serif;
154. font-weight:300;
155. font-size:2rem;
156. }
157. figcaption nav ul {display:block;padding-top:10px;}
158. figcaption nav ul li {display:inline-block;margin-left:5px;}
159. figcaption nav ul li a {
160. position:relative;
161. display:block;
162. width:40px;
163. height:40px;
164. background:rgba(255,255,255,0.2);
165. text-decoration:none;
166. color:white;
167. -webkit-border-radius:50%;
168. -moz-border-radius:50%;
169. border-radius:50%;
170. -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
171. -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
172. box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
173. -webkit-transition:all .15s;
174. -moz-transition:all .15s;
175. -o-transition:all .15s;
176. transition:all .15s;
177. }
178. figcaption nav ul li a:hover {
179. background:rgba(255,255,255,0);
180. -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
181. -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
182. box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
183. }
184. figcaption p {
185. padding:50px 15px;
186. font-family:'Titillium Web', sans-serif;
187. font-weight:300;
188. color:#333;
189. background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
190. background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
191. background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
192. background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
193. background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
194. background-size:1px 100%;
195. background-repeat:no-repeat;
196. background-position:50% 0%;
197. }
198. input[type="radio"]:hover + label {
199. background:rgba(255,255,255,0.6);
200. }
201. input[type="radio"]:checked + label {
202. background:rgba(255,255,255,1);
203. -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
204. -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
205. box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
206. }
207. input[type="radio"]:checked + label:before {}
208. input[type="radio"]:checked ~ figure img {
209. z-index:2;
210. -webkit-transform:translatex(0px);
211. -moz-transform:translatex(0px);
212. -ms-transform:translatex(0px);
213. -o-transform:translatex(0px);
214. transform:translatex(0px);
215. -webkit-transition:all .15s, z-index 0s;
216. -moz-transition:all .15s, z-index 0s;
217. -o-transition:all .15s, z-index 0s;
218. transition:all .15s, z-index 0s;
219. }
220. input[type="radio"]:checked ~ figure[class*="entypo-"]:before {
221. z-index:3;
222. color:rgba(255,255,255,0.5);
223. -webkit-transition:color .5s;
224. -moz-transition:color .5s;
225. -o-transition:color .5s;
226. transition:color .5s;
227. }
228. input[type="radio"]:checked ~ figure figcaption {
229. z-index:8;
230. -webkit-transform:translateX(0px);
231. -moz-transform:translateX(0px);
232. -ms-transform:translateX(0px);
233. -o-transform:translateX(0px);
234. transform:translateX(0px);
235. -webkit-transition:all .35s, .7s;
236. -moz-transition:all .35s, .7s;
237. -o-transition:all .35s, .7s;
238. transition:all .35s, .7s;
239. }
240. h2 {
241. margin-top:150px;
242. text-align:center;
243. font-family: 'Titillium Web', sans-serif;
244. font-weight:300;
245. font-size:1.2rem;
246. }
247. h2 a {
248. position:relative;
249. color:tomato;
250. text-decoration:none;
251. }
252. h2 a:after {
253. content:'';
254. position:absolute;
255. bottom:-2px;
256. left:0;
257. width:0;
258. height:1px;
259. background:tomato;
260. -webkit-transition:width .1s;
261. -moz-transition:width .1s;
262. -o-transition:width .1s;
263. transition:width .1s;
264. }
265. h2 a:hover:after {
266. width:100%;
267. }
268. body {background:#f0f0f0;}
269. html, body {
270. width:100%;
271. height:100%;
272. }

复制代码

这个CSS代码相对比较复杂，重点在这个地方：

利用label重写radio的样式，但是又能完成点击label就像点击radio一样的效果，核心代码如下：

1. input[type="radio"], input[type="radio"] + label {
2. position:absolute;
3. bottom:15px;
4. display:block;
5. width:20px;
6. height:20px;
7. -webkit-border-radius:50%;
8. -moz-border-radius:50%;
9. border-radius:50%;
10. cursor:pointer;
11. }
12. input[type="radio"] {
13. opacity:0;
14. z-index:9;
15. }
16. input[value="one"], input[value="one"] + label {left:20px;}
17. input[value="two"], input[value="two"] + label {left:128px;}
18. input[value="three"], input[value="three"] + label {left:236px;}
19. input[value="four"], input[value="four"] + label {left:344px;}
20. input[value="five"], input[value="five"] + label {left:452px;}
21. input[value="six"], input[value="six"] + label {right:20px;}
22. input[type="radio"] + label {
23. background:rgba(255,255,255,0.35);
24. z-index:7;
25. -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
26. -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
27. box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
28. -webkit-transition:all .3s;
29. -moz-transition:all .3s;
30. -o-transition:all .3s;
31. transition:all .3s;
32. }

复制代码