注册登录

纯CSS3打造的lightbox图片弹层效果

perfundo是一款纯CSS3 lightbox插件。使用它可以轻松创建单张或多张图片的弹出lightbox层效果，只需要构建HTML结构，CSS3直接调用，当然也可以和js结合一起使用。

查看演示 下载源码

使用方法

HTML结构

在页面中引入perfundo-icons.css文件。

<link href="https://zhishitu.com" rel="stylesheet">
知识兔
HTML结构

单张图片的HTML结构如下：

<div class="perfundo">
  <style>
  #perfundo-single:target:before{background-image:url(large.jpg);}
  </style>
  <a class="perfundo__link" href="https://zhishitu.com"> <img src="/small.jpg"> </a>
  <div id="perfundo-single" class="perfundo__overlay"> 
    <a href="https://zhishitu.com" class="perfundo__close perfundo__control">Close</a> 
  </div>
</div>
知识兔

多张图片的HTML结构如下：

<div class="perfundo">
  <style>#perfundo-img1:target:before{background-image:url(1.jpg);}</style>
  <a class="perfundo__link" href="https://zhishitu.com">
    <img src="/1.jpg">
  </a>
  <div id="perfundo-img1" class="perfundo__overlay">
    <a href="https://zhishitu.com" class="perfundo__close perfundo__control">Close</a>
    <a class="perfundo__next perfundo__control" href="https://zhishitu.com">Next</a>
  </div>
</div>
 
<div class="perfundo">
  <style>#perfundo-img2:target:before{background-image:url(2.jpg);}</style>
  <a class="perfundo__link" href="https://zhishitu.com">
    <img src="/2.jpg">
  </a>
  <div id="perfundo-img2" class="perfundo__overlay">
    <a href="https://zhishitu.com" class="perfundo__close perfundo__control">Close</a>
    <a class="perfundo__next perfundo__control" href="https://zhishitu.com">Next</a>
    <a class="perfundo__prev perfundo__control" href="https://zhishitu.com">Prev</a>
  </div>
</div>
 
<div class="perfundo">
  <style>#perfundo-img3:target:before{background-image:url(3.jpg);}</style>
  <a class="perfundo__link" href="https://zhishitu.com">
    <img src="/3.jpg">
  </a>
  <div id="perfundo-img3" class="perfundo__overlay">
    <a href="https://zhishitu.com" class="perfundo__close perfundo__control">Close</a>
    <a class="perfundo__prev perfundo__control" href="https://zhishitu.com">Prev</a>
  </div>
</div>
知识兔

结合JS的用法

你也可以结合js一起使用。

<!-- Put this inside the <head> section of your HTML. -->
<link rel="stylesheet" href="https://zhishitu.com">

<!-- Put this before the closing </body> tag (optionally!). -->
<script src="/perfundo.min.js"></script>
<script>
  perfundo('.perfundo');
</script>
知识兔

您还可以到Github上了解更多有关该效果的使用情况：https://github.com/maoberlehner/perfundo

计算机