zoukankan      html  css  js  c++  java

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

    接下来我们一起来分析一下源码，首先是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="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="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="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="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="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="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.   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.   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.   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.   600px;
    104.   height:300px;
    105.   display:block;
    106.   overflow:hidden;
    107. }
    108. figure img {
    109.   bottom:0;
    110.   left:0;
    111.   display:block;
    112.   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.   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.   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.   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.   100%;
    268. }
    269. body {background:#f0f0f0;}
    270. html, body {
    271.   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.   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. }
    复制代码
  • 相关阅读:
    Leetcode 148. Sort List
    stat/lstat函数使用
    C/C++内存分配和管理
    initializer_list 列表初始化
    extern "C" 含义
    C语言宏定义##连接符和#符的使用
    rabbitMQ日常管理（转）
    java/rabbitmp发布订阅示例（转）
    oracle分页查询
    oracle imp使用
  • 原文地址：https://www.cnblogs.com/liweitao/p/3816977.html
Copyright © 2011-2022 走看看