最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

纯CSS3图片遮罩层和lightbox动画弹层效果

来源:http://www.erdangjiade.com/js/8567.html 沐浴春风 2018-09-03 14:57浏览(331)

这是帮客户做的一个Js遮罩层特效,Perfundo是一款纯CSS3 lightbox插件。使用它可以轻松创建单张或多张图片的弹出lightbox层效果,只需要构建HTML结构,CSS3直接调用,当然也可以和js结合一起使用。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

纯CSS3图片遮罩层和lightbox动画弹层效果
分类:图片代码 > 大图切换 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 20 积分

使用方法 HTML结构 在页面中引入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>
结合JS的用法

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

<!-- Put this inside the <head> section of your HTML. -->
<link rel="stylesheet" href="perfundo.min.css">

<!-- Put this before the closing </body> tag (optionally!). -->
<script src="perfundo.min.js"></script>
<script>
  perfundo('.perfundo');
</script>
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/8567.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    12-25 17:03
    DawnZhao
    厉害了,纯css
  • 头像 沙发
    09-09 15:44
    tian0922
    滴水穿石,不是力量大,而是功夫深。
1 2