介绍：
今日看到一道面试题，关于 使用纯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%); }
一些注意事项
- 里面使用linear-gradient 实现了一个小箭头图标，但是IE10以下版本不支持；并且IE支持background-repeat,但是不支持background-repeat-x|background-repeat-y;
- IE8及以下版本 不支持 figure,figcaption标签；可使用html5shim.js解决
给图片加超链接之后，会自带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查看