接下来我们一起来分析一下源码，首先是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. VS2005中SetUnhandledExceptionFilter函数应用

    很多软件通过设置自己的异常捕获函数,捕获未处理的异常,生成报告或者日志(例如生成mini-dump文件),达到Release版本下追踪Bug的目的.但是,到了VS2005(即VC8),Microsof ...

  2. 【leetcode】Palindrome Number (easy)

    Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could negativ ...

  3. HDU1437+模拟

    枚举中间可能出现的天气 #include<stdio.h> #include<string.h> #include<stdlib.h> ; ][ ]; void s ...

  4. win8.1下使用vmware workstation 来编译ffmpeg

    先吐槽下,T440预装的win8.1 采用 UEFI+GPT分区导致 无法使用传统的EasyBCD来达到win+ubuntu双系统效果, 尝试了2天全部失败,等以后有时间了 买块U盘再干掉win8 现 ...

  5. 【转】Java自动装箱、拆箱、缓冲池

    JDK5以后 Integer a = 3;              这是自动装箱int     i = new Integer(2); 这是自动拆箱就是基本类型和其对应的包装类型在需要的时候可以互相 ...

  6. hibernate annotation注解 主键ID自增长

    @Id @SequenceGenerator(name="increment") @GeneratedValue(strategy=GenerationType.AUTO, gen ...

  7. Android studio中不同颜色代表什么意思

    和你的版本控制工具相关 绿色,已经加入控制暂未提交红色,未加入版本控制蓝色,加入,已提交,有改动白色,加入,已提交,无改动

  8. Java中Scanner类

    java.util.Scanner类,这是一个用于扫描输入文本的新的实用程序

  9. [原]Unity3D深入浅出 - 物理引擎之刚体部件(Rigidbody)

    在虚拟世界中,任何物体都是没有活力的,要想变的真实,Rigidbody是必不可少的组件,下面介绍Rigidbody的各个属性: Mass:质量 Drag:阻力,对象在运动时遇到的空气阻力,0表示没有空 ...

  10. [转]vs2010 快捷键大全

    vs2010 快捷键大全 VS2010版快捷键 Ctrl+E,D ----格式化全部代码  Ctrl+E,F ----格式化选中的代码  CTRL + SHIFT + B生成解决方案  CTRL + ...