• 纯 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查看

  • 相关阅读:
    名字对战,看看你名字里蕴藏的力量
    趣味小游戏,测试你们做过的傻事
    贪吃蛇小游戏的初步尝试制作
    实现成绩表的初步想法
    结构体的一些小知识点
    慢慢完善-小游戏之推箱子
    よんにち
    さんか表单 框架 样式表和样式表选择器
    Two Day
    One day
  • 原文地址:https://www.cnblogs.com/kasmine/p/6499287.html
Copyright © 2020-2023  润新知