纯 CSS 实现幻灯片播放

介绍：

 　　今日看到一道面试题，关于 使用纯CSS，不利用js， 写一个简单的幻灯效果页面。于是做了一个小demo，建议使用chrome,IE11查看~~

主要思想:

　　利用 CSS3的 伪类选择器 ：target ，更多内容可查看 MDN 

 

原理介绍：　

1  <a href="#image1">
2        <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt="">
3  </a>

:target伪类可以指定当前锚点目标元素的样式

.hidden_gallery_wrapper img{
  opacity: 0;
  transition: all .7s;
  transform: translateX(1000px);
}

.hidden_gallery_wrapper>div:target>img {
    margin-top: 50vh;
    opacity: 1.0;
    transform: translate(0,-50%);
}

一些注意事项

  1. 里面使用linear-gradient 实现了一个小箭头图标，但是IE10以下版本不支持；并且IE支持background-repeat,但是不支持background-repeat-x|background-repeat-y;
  2. IE8及以下版本 不支持 figure,figcaption标签；可使用html5shim.js解决
  3. 给图片加超链接之后，会自带2像素边框(IE) img{border:none;}

Demo 的展示，戳 here

实现的Demo源代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>纯CSS实现LightBox</title>
 9     <link rel="stylesheet" href="lightbox.css">
10 </head>
11 
12 <body>
13     <div class="container">
14         <ul class="gallery_wrapper">
15             <li>
16                 <a href="#image1">
17                     <figure>
18                         <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt="">
19                         <figcaption>图片说明</figcaption>
20                     </figure>
21                 </a>
22             </li>
23             <li>
24                 <a href="#image2">
25                     <figure><img src="https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt="">
26                         <figcaption>图片说明</figcaption>
27                     </figure>
28                 </a>
29             </li>
30             <li>
31                 <a href="#image3">
32                     <figure>
33                         <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt="">
34                         <figcaption>图片说明</figcaption>
35                     </figure>
36                 </a>
37             </li>
38             <li>
39                 <a href="#image4">
40                     <figure><img src="https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt="">
41                         <figcaption>图片说明</figcaption>
42                     </figure>
43                 </a>
44             </li>
45             <li>
46                 <a href="#image5">
47                     <figure>
48                         <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt="">
49                         <figcaption>图片说明</figcaption>
50                     </figure>
51                 </a>
52             </li>
53             <li>
54                 <a href="#image6">
55                     <figure><img src="https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt="">
56                         <figcaption>图片说明</figcaption>
57                     </figure>
58                 </a>
59             </li>
60         </ul>
61 
62     </div>
63     <div class="hidden_gallery_wrapper">
64         <div id="image1">
65             <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt="">
66             <a href="#image6" class="img_pre">Prev</a>
67             <a href="#image2" class="img_next">Next</a>
68             <a href="#" class="img_close"></a>
69           </div>
70         <div id="image2"><img src="https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt=""><a href="#image1" class="img_pre">Prev</a>
71         <a href="#image3" class="img_next">Next</a>
72         <a href="#" class="img_close"></a></div>
73         <div id="image3">
74             <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt=""><a href="#image2" class="img_pre"></a>
75             <a href="#image4" class="img_next"></a>
76             <a href="#" class="img_close"></a></div>
77         <div id="image4"><img src="https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt=""><a href="#image3" class="img_pre">Prev</a>
78         <a href="#image5" class="img_next">Next</a>
79         <a href="#" class="img_close"></a></div>
80         <div id="image5">
81             <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000002aWIVK0qvVTB.jpg?max_age=2592000" alt=""><a href="#image4" class="img_pre">Prev</a>
82             <a href="#image6" class="img_next">Next</a>
83             <a href="#" class="img_close"></a></div>
84         <div id="image6"><img src="https://y.gtimg.cn/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000" alt=""><a href="#image5" class="img_pre">Prev</a>
85         <a href="#image1" class="img_next">Next</a>
86         <a href="#" class="img_close"></a></div>
87     </div>
88 </body>
89 
90 </html>

 

  1 *{
  2   margin:0;
  3   padding:0;
  4 }
  5 html,body{
  6   height: 100%;
  7   font-size:16px;
  8   background: #f0f0f0;
  9 }
 10 .container{
 11   width: 90%;
 12   position: relative;
 13   margin:20px auto;
 14 }
 15 
 16 .gallery_wrapper{
 17   list-style: none;
 18   background: #fff;
 19   padding-top: 20px;
 20   text-align: center;
 21 }
 22 .gallery_wrapper li{
 23   display: inline-block;
 24 }
 25 .gallery_wrapper figure{
 26   margin: 10px;
 27     width: 220px;
 28     height: 300px;
 29     overflow: hidden;
 30     position: relative;
 31     box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.36);
 32 }
 33 /*用来遮住图片放大的部分*/
 34 .gallery_wrapper figure::after {
 35     content: "";
 36     border: 11px solid rgb(255, 255, 255);
 37     position: absolute;
 38     top: 0px;
 39     left: 0px;
 40     bottom: 69px;
 41     right: 0;
 42 }
 43 .gallery_wrapper img{
 44   width: 220px;
 　　　border:none;
 45   height: 220px;
 46   transition: all .5s;
 47 }
 48 .gallery_wrapper a:hover img{
 49   transform:scale(1.1);
 50 }
 51 .gallery_wrapper figcaption{
 52   margin-top:5px;
 53   padding:5px;
 54   color:grey;
 55 }
 56 .hidden_gallery_wrapper>div{
 57   position: fixed;
 58   top:0;
 59   right:0;
 60   bottom: 0px;
 61   left:0;
 62   text-align: center;
 63   background: rgba(0,0,0,.8);
 64   display: none;
 65 }
 66 .hidden_gallery_wrapper>div:target{
 67   display: block;
 68 }
 69 .hidden_gallery_wrapper img{
 70   opacity: 0;
 71   transition: all .7s;
 72   transform: translateX(1000px);
 73 }
 74 
 75 .hidden_gallery_wrapper>div:target>img {
 76     margin-top: 50vh;
 77     opacity: 1.0;
 78     transform: translate(0,-50%);
 79 }
 80 .hidden_gallery_wrapper .img_pre,.hidden_gallery_wrapper .img_next{
 81   width: 65px;
 82   z-index:4;
 83   position: absolute;
 84   top: calc(50% - 15px);
 85   border-radius: 5px;
 86   height: 32px;
 87     line-height: 32px;
 88     text-decoration: none;
 89     transition: all 1s;
 90     color: rgb(255, 255, 255);
 91 }
 92 .hidden_gallery_wrapper .img_pre {
 93     left: 30px;
 94     text-indent: 13px;
 95     background: linear-gradient(135deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.24) 0),linear-gradient(45deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.28) 0);
 96     background-size: 100% 50%;
 97     background-position: 0 0,0 100%;
 98     background-repeat: no-repeat;
 99 }
100 .hidden_gallery_wrapper .img_next {
101     right: 30px;
102     text-indent: -13px;
103     background:linear-gradient(-135deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.24) 0),linear-gradient(-45deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.28) 0);
104     background-size: 100% 50%;
105     background-position: 0 0,0 100%;
106     background-repeat: no-repeat;
107 }
108 
109 .img_pre:hover{
110   background: linear-gradient(135deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.5) 0),linear-gradient(45deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.5) 0);
111   background-size: 100% 50%;
112   background-position: 0 0,0 100%;
113   background-repeat: no-repeat;
114 }
115 .img_next:hover{
116 background: linear-gradient(-135deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.5) 0),linear-gradient(-45deg,rgba(0, 0, 0, 0) 12.5px,rgba(158, 158, 158, 0.5) 0);
117 background-size: 100% 50%;
118 background-position: 0 0,0 100%;
119 background-repeat: no-repeat;
120 }
121 
122 .img_close{
123   position: absolute;
124   z-index: 2;
125   top: 0;
126   right: 0;
127   bottom: 0;
128   left: 0;
129   cursor: default;
130 }

 

结束语：

　　实现原理还是比较简单的，大家可以自己看一下~ 其中，还利用了一点css3技巧，但是不是所有浏览器都兼容支持，所以建议使用chrome查看

posted @ 2017-03-04 02:19  Kasmine  阅读(4176)  评论(0)  编辑  收藏  举报