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

2023-07-21 10:35:10

接下来我们一起来分析一下源码，首先是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. }

复制代码

上一篇：jQuery 遍历(上)


下一篇：关于在SLES11, RHEL6, OEL6 and UEK2 Kernels使用hugepages的告警