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

复制代码

纯CSS3实现的图片滑块程序，效果非常酷的更多相关文章

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

    原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性 ...

  2. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  3. 一款纯css3实现的图片3D翻转幻灯片

    之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览   源码下载 实现的代码. ht ...

  4. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  5. 使用CSS3实现3D图片滑块效果

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  6. 使用 CSS3 实现 3D 图片滑块效果

    Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址:http://tympanus.NET/codrops/2011/09 ...

  7. 纯CSS3实现GIF图片动画效果

    在线演示 本地下载

  8. 纯CSS3制作卡通场景汽车动画效果

    前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...

  9. 纯css3鼠标经过图片显示描述特效

    http://***/Article/5582 今天给大家带来的是用css3技术实现鼠标经过图片,显示图片描述的动画效果.鼠标经过图片时,图片动画缩小并渐变显示描述.我们一起看看效果图: 在线预览   ...

随机推荐

  1. DJANGO的ORM的Q查询作多字段外键的模糊查询样码

    工作中用到的,存照一下. from django.db.models import Q if self.kwargs.has_key('search_pk'): search_pk = self.kw ...

  2. 如何将DJANGO轻量级化

    看看这本书,应该有收获. 不用DJANGO-ADMIN STARTPROJECT XXX 一个文件,一样可以写出可以运行的原生DJANGO哟. import hashlib import sys im ...

  3. Java将整个文件夹里的文本中的字符串替换成另外一个字符串（可用于项目复制，变成另一个项目）

    import org.junit.Test; import java.io.*; /** * User: HYY * Date: 13-8-18 * Time: 下午8:11 * To change ...

  4. HeadFirst设计模式之命令模式

    一. 1.因为是操作经常变化,所以封装操作为command对象.You can do that by introducing “command objects” into your design. A ...

  5. Silverlight之OOB模式下的一些事

    本文简介: 1.为什么要使用OOB?使用OOB的作用? 2.如何实现OOB模式 3.对OOB进行一些设置: 4.检测OOB的安装状态: 5.更新应用程序: 6.WebBrowser控件: 7.桌面通知 ...

  6. JSON格式转换成XML格式

    第一种方法: 需要使用命名空间System.Runtime.Serialization.Json 下面有JsonReaderWriterFactory XmlDictionaryReader read ...

  7. CodeWars题目筛选

    http://www.codewars.com/kata/search/csharp?q=&r%5B%5D=-8&xids=completed&beta=false 语言选择C ...

  8. 1067. Disk Tree（字符串）

    1067 破题啊  写完发现理解错题意了 子目录下会有跟之前重名的 把输入的字符串存下来 排下序 然后依次找跟上面有没有重的 #include <iostream> #include< ...

  9. 关于pragma pack的用法（一）

    一个很重要的参数#pragma pack(n) 数据边界对齐方式:以如下结构为例: struct {                    char a;                    WOR ...

  10. bzoj1858: [Scoi2010]序列操作

    lazy-tag线段树. #include<cstdio> #include<algorithm> #include<cstring> using namespac ...