首页 > 代码库 > 纯CSS3实现的图片滑块程序，效果非常酷

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

2024-07-10 06:38:18   224人阅读

接下来我们一起来分析一下源码，首先是HTML代码，非常简单：

  1. <div id="gal">
  2.   <nav class="galnav">
  3.     <ul>
  4.         <li><input type="radio" name="btn" value="http://www.mamicode.com/one" checked="checked" />
  5.         <label for="btn"></label>
  6.         <figure>
  7.           <img src="http://www.mamicode.com/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="http://www.mamicode.com/#" class="entypo-dribbble">
  14.             </a></li>
  15.             <li><a href="http://www.mamicode.com/#" class="entypo-twitter"></a>
  16.             </li>
  17.         </ul>
  18.               </nav>  
  19.           </figcaption>
  20.         </figure>
  21.           </li>
  22.         <li><input type="radio" name="btn" value="http://www.mamicode.com/two" /> <label for="btn">
  23.         </label>
  24.          <figure class="entypo-forward">
  25.           <img src="http://www.mamicode.com/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="http://www.mamicode.com/#" class="entypo-dribbble"></a>
  32.             </li>
  33.             <li><a href="http://www.mamicode.com/#" class="entypo-twitter"></a>
  34.             </li>
  35.         </ul>
  36.               </nav>  
  37.           </figcaption>
  38.         </figure>
  39.           </li>
  40.         <li><input type="radio" name="btn" value="http://www.mamicode.com/three" /> <label for="btn">
  41.         </label>
  42.         <figure class="entypo-forward">
  43.           <img src="http://www.mamicode.com/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="http://www.mamicode.com/#" class="entypo-dribbble">
  51.             </a></li>
  52.             <li>
  53.             <a href="http://www.mamicode.com/#" class="entypo-twitter">
  54.             </a></li>
  55.         </ul>
  56.               </nav>  
  57.           </figcaption>
  58.         </figure>
  59.           </li>
  60.         <li><input type="radio" name="btn" value="http://www.mamicode.com/four" /> <label for="btn">
  61.         </label>
  62.          <figure class="entypo-forward">
  63.           <img src="http://www.mamicode.com/images/04_Joffrey.jpg" />
  64.           <figcaption>
  65.             <h4>Joffrey</h4>
  66.               <nav role=‘navigation‘>
  67.                 <p>鈻?/p> </p>
  68.         <ul>
  69.             <li><a href="http://www.mamicode.com/#" class="entypo-dribbble">
  70.             </a></li>
  71.             <li><a href="http://www.mamicode.com/#" class="entypo-twitter">
  72.             </a></li>
  73.         </ul>
  74.               </nav>  
  75.           </figcaption>
  76.         </figure>
  77.           </li>
  78.         <li><input type="radio" name="btn" value="http://www.mamicode.com/five" /> <label for="btn">
  79.         </label>
  80.          <figure class="entypo-forward">
  81.           <img src="http://www.mamicode.com/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="http://www.mamicode.com/#" class="entypo-dribbble">
  89.             </a></li>
  90.             <li>
  91.             <a href="http://www.mamicode.com/#" class="entypo-behance">
  92.             </a></li>
  93.         </ul>
  94.               </nav>  
  95.           </figcaption>
  96.         </figure>
  97.           </li>
  98.         <li><input type="radio" name="btn" value="http://www.mamicode.com/six" /> <label for="btn">
  99.         </label>
  100.          <figure class="entypo-forward">
  101.           <img src="http://www.mamicode.com/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="http://www.mamicode.com/#" class="entypo-dribbble">
  109.             </a></li>
  110.             <li>
  111.             <a href="http://www.mamicode.com/#" 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="http://www.mamicode.com/one"], input[value="http://www.mamicode.com/one"] + label {left:20px;}
  55. input[value="http://www.mamicode.com/two"], input[value="http://www.mamicode.com/two"] + label {left:128px;}
  56. input[value="http://www.mamicode.com/three"], input[value="http://www.mamicode.com/three"] + label {left:236px;}
  57. input[value="http://www.mamicode.com/four"], input[value="http://www.mamicode.com/four"] + label {left:344px;}
  58. input[value="http://www.mamicode.com/five"], input[value="http://www.mamicode.com/five"] + label {left:452px;}
  59. input[value="http://www.mamicode.com/six"], input[value="http://www.mamicode.com/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. }
  199. input[type="radio"]:hover + label {
  200.   background:rgba(255,255,255,0.6);
  201. }
  202. input[type="radio"]:checked + label {
  203.   background:rgba(255,255,255,1);
  204.   -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  205.   -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  206.   box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
  207. }
  208. input[type="radio"]:checked + label:before {}
  209. input[type="radio"]:checked ~ figure img {
  210.   z-index:2;
  211.   -webkit-transform:translatex(0px);
  212.   -moz-transform:translatex(0px);
  213.   -ms-transform:translatex(0px);
  214.   -o-transform:translatex(0px);
  215.   transform:translatex(0px);
  216.   -webkit-transition:all .15s, z-index 0s;
  217.   -moz-transition:all .15s, z-index 0s;
  218.   -o-transition:all .15s, z-index 0s;
  219.   transition:all .15s, z-index 0s;
  220. }
  221. input[type="radio"]:checked ~ figure[class*="entypo-"]:before {
  222.   z-index:3;
  223.   color:rgba(255,255,255,0.5);
  224.   -webkit-transition:color .5s;
  225.   -moz-transition:color .5s;
  226.   -o-transition:color .5s;
  227.   transition:color .5s;
  228. }
  229. input[type="radio"]:checked ~ figure figcaption {
  230.   z-index:8;
  231.   -webkit-transform:translateX(0px);
  232.   -moz-transform:translateX(0px);
  233.   -ms-transform:translateX(0px);
  234.   -o-transform:translateX(0px);
  235.   transform:translateX(0px);
  236.   -webkit-transition:all .35s, .7s;
  237.   -moz-transition:all .35s, .7s;
  238.   -o-transition:all .35s, .7s;
  239.   transition:all .35s, .7s;
  240. }
  241. h2 {
  242.   margin-top:150px;
  243.   text-align:center;
  244.   font-family: ‘Titillium Web‘, sans-serif;
  245.   font-weight:300;
  246.   font-size:1.2rem;
  247. }
  248. h2 a {
  249.   position:relative;
  250.   color:tomato;
  251.   text-decoration:none;
  252. }
  253. h2 a:after {
  254.   content:‘‘;
  255.   position:absolute;
  256.   bottom:-2px;
  257.   left:0;
  258.   width:0;
  259.   height:1px;
  260.   background:tomato;
  261.   -webkit-transition:width .1s;
  262.   -moz-transition:width .1s;
  263.   -o-transition:width .1s;
  264.   transition:width .1s;
  265. }
  266. h2 a:hover:after {
  267.   width:100%;
  268. }
  269. body {background:#f0f0f0;}
  270. html, body {
  271.   width:100%;
  272.   height:100%;
  273. }
复制代码

这个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="http://www.mamicode.com/one"], input[value="http://www.mamicode.com/one"] + label {left:20px;}
  17. input[value="http://www.mamicode.com/two"], input[value="http://www.mamicode.com/two"] + label {left:128px;}
  18. input[value="http://www.mamicode.com/three"], input[value="http://www.mamicode.com/three"] + label {left:236px;}
  19. input[value="http://www.mamicode.com/four"], input[value="http://www.mamicode.com/four"] + label {left:344px;}
  20. input[value="http://www.mamicode.com/five"], input[value="http://www.mamicode.com/five"] + label {left:452px;}
  21. input[value="http://www.mamicode.com/six"], input[value="http://www.mamicode.com/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. }
复制代码


联系
我们