Lightbox/弹窗
Perfundo - lightbox图片放大插件
PetitQ
收藏
perfundo 是一款纯 CSS3 lightbox 插件。它可以创建单张或多张图片的弹出 lightbox 层效果，也可以和 js 结合一起使用。
使用方法：
在页面中引入 perfundo-icons.css 文件。
也想出现在这里？联系我们吧
<link href="dist/perfundo.css" rel="stylesheet">
HTML 结构：
单张图片的 HTML 结构如下。
<div class="perfundo">
<style>
#perfundo-single:target:before{background-image:url(large.jpg);}</style>
<a class="perfundo__link" href="#perfundo-single"> <img src="small.jpg"> </a>
<div id="perfundo-single" class="perfundo__overlay">
<a href="#perfundo-untarget" 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="#perfundo-img1">
<img src="1.jpg">
</a>
<div id="perfundo-img1" class="perfundo__overlay">
<a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a>
<a class="perfundo__next perfundo__control" href="#perfundo-img2">Next</a>
</div>
</div>
<div class="perfundo">
<style>#perfundo-img2:target:before{background-image:url(2.jpg);}</style>
<a class="perfundo__link" href="#perfundo-img2">
<img src="2.jpg">
</a>
<div id="perfundo-img2" class="perfundo__overlay">
<a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a>
<a class="perfundo__next perfundo__control" href="#perfundo-img3">Next</a>
<a class="perfundo__prev perfundo__control" href="#perfundo-img1">Prev</a>
</div>
</div>
<div class="perfundo">
<style>#perfundo-img3:target:before{background-image:url(3.jpg);}</style>
<a class="perfundo__link" href="#perfundo-img3">
<img src="3.jpg">
</a>
<div id="perfundo-img3" class="perfundo__overlay">
<a href="#perfundo-untarget" class="perfundo__close perfundo__control">Close</a>
<a class="perfundo__prev perfundo__control" href="#perfundo-img2">Prev</a>
</div>
</div>
该纯 CSS3 lightbox 插件的 github 地址为：https://github.com/maoberlehner/perfundo
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
