接下来我们一起来分析一下源码，首先是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. HDU4628+状态压缩DP

    /* 状态压缩DP dp[ i ]:达到i状态的最小step. 题意:每次可以去掉一个回文串,求最少几步能取完. */ #include<stdio.h> #include<stri ...

  2. 关于MIM金属注射成型技术知识大全

    1.什么是MIM MIM即(Metal Injection Molding)是金属注射成型的简称.是将金属粉末与其粘结剂的增塑混合料注射于模型中的成形方法.它是先将所选粉末与粘结剂进行混合,然后将混合 ...

  3. Android：控件布局（单帧布局）FrameLayout

    FrameLayout:所有控件位于左上角,并且直接覆盖前面的子元素. 在最上方显示的层加上: android:clickable="true" 可以避免点击上层触发底层. 实例: ...

  4. linux 新建用户、用户组 以及为新用户分配权限

    Linux 系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统.用户的账号 一方面可以帮助系统管理员对使用系统的用户进 ...

  5. Android开发之错误：elicpse运行时弹出Running Android Lint has encountered a problem failed, nullpointerexception

    昨天安装了下Android Studio,把SDK路径指向了ADT目录下的SDK目录.同时FQ出去更新了下SDK.然后今天运行eclipse的时候,弹出错误,同时在工程的名称处有错误提醒,但是代码中没 ...

  6. 需要保存数据zabbix，不需要保存数据nagios

    需要保存数据zabbix,不需要保存数据nagios cacti 有什么好用的基于Web的Linux系统监控开源工具(网管系统) 要求类似于Ubuntu的Landscape,可以记录下历史CPU数值. ...

  7. @深入注解，在Java中设计和使用自己的注解

    我们用过 JDK给我们提供的  @Override  @Deprecated @SuppressWarning 注解  ,这些注解是JDK给我们提供的 ,我们只是在用别人写好的东西 ,那么我们是否可以 ...

  8. The only legal comparisons are between two numbers, two strings, or two dates.

    The only legal comparisons are between two numbers, two strings, or two dates. Left  hand operand is ...

  9. DataTable导出到Excel(.NET 4.0)

    最近在论坛里又看到很多关于DataTable(DataSet)导入Excel的帖子,我也温故知新一下,用VS2010重新整理了一个Sample.这个问题简化一下就是内存数据到文件,也就是遍历赋值,只不 ...

  10. 手机3D游戏开发：自定义Joystick的相关设置和脚本源码

    Joystick在手游开发中非常常见,也就是在手机屏幕上的虚拟操纵杆,但是Unity3D自带的Joystick贴图比较原始,所以经常有使用自定义贴图的需求. 下面就来演示一下如何实现自定义JoySti ...