接下来我们一起来分析一下源码，首先是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. 微软的Dll管理方案及其变迁（Side-by-side assembly）

    本文简要介绍Side-by-side assembly技术,探讨在插件技术中使用类似方法的可能. 什么是Side-ty-side Assembly Side-by-side assembly是Wind ...

  2. BZOJ 3123 SDOI2013 森林

    首先对于查询操作就是裸的COT QAQ 在树上DFS建出主席树就可以了 对于连接操作,我们发现并没有删除 所以我们可以进行启发式合并,每次将小的树拍扁插入大的树里并重构即可 写完了之后第一个和第二个点 ...

  3. spring结合时，web.xml的配置

    <!-- 1. web.xml配置 <context-param> <param-name>webAppRootKey</param-name> <pa ...

  4. OpenStack 部署运维实战

    http://www.ibm.com/developerworks/cn/cloud/library/1408_zhangxl_openstack/#icomments 本文为您介绍了网易公司基于 O ...

  5. POJ3295——Tautology

    Tautology Description WFF 'N PROOF is a logic game played with dice. Each die has six faces represen ...

  6. 企业级 Linux 安全管理实例（1）

    公司企业多用Linux服务器,其中涉及到的一些安全管理对于安全运维人员来说是必不可少的应知技能, 以下案例沿着背景->需求->具体要求->操作步骤的流程进行描述,可以加深对安全管理的 ...

  7. zip文件解压或压缩

    <span style="font-size:18px;">/** * lsz */ public final class ZipUtil { /** * 解压zip文 ...

  8. caffe简易上手指南（二）—— 训练我们自己的数据

    训练我们自己的数据 本篇继续之前的教程,下面我们尝试使用别人定义好的网络,来训练我们自己的网络. 1.准备数据 首先很重要的一点,我们需要准备若干种不同类型的图片进行分类.这里我选择从ImageNet ...

  9. JS计算字符串所占字节数

    最近项目有个需求要用js计算一串字符串写入到localStorage里所占的内存,众所周知的,js是使用Unicode编码的.而Unicode的实现有N种,其中用的最多的就是UTF-8和UTF-16. ...

  10. sdut Message Flood（c++ map）

    用字典树没过,学习了一下map; 参考博客:http://blog.csdn.net/zhengnanlee/article/details/8962432 AC代码 #include<iost ...