建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

CSSBox 纯CSS的最小响应式图像库灯箱插件

来源:易助科技网浏览量:28收藏

简介


CSSBox是一个最小的、响应灵敏的纯CSS图像库灯箱,用户可以在全屏灯箱弹出窗口中的全尺寸图像之间导航。使用CSS/CS3和纯html标记构建。


更多灯箱画廊插件:👉  [ 详情 ]


CSSBox 纯CSS的最小响应式图像库灯箱插件-效果演示图



用法


1. 引入


<link rel="stylesheet" href="cssbox.css">



2. HTML


<div class="cssbox">
    <a id="image1" href="#image1"><img class="cssbox_thumb" src="https://unsplash.it/300/200?image=1044" height="300"
        width="320">
      <span class="cssbox_full"><img src="https://unsplash.it/1280/768?image=1044"></span>
    </a>
    <a class="cssbox_close" href="#void"></a>
    <a class="cssbox_next" href="#image2">></a>
  </div>

  <div class="cssbox">
    <a id="image2" href="#image2"><img class="cssbox_thumb" src="https://unsplash.it/300/200?image=1040" height="300"
        width="320">
      <span class="cssbox_full"><img src="https://unsplash.it/1280/768?image=1040"></span>
    </a>
    <a class="cssbox_close" href="#void"></a>
    <a class="cssbox_prev" href="#image1"><</a>
    <a class="cssbox_next" href="#image3">></a>
  </div>
  <div class="cssbox">
    <a id="image3" href="#image3"><img class="cssbox_thumb" src="https://unsplash.it/300/200?image=1025" height="300"
        width="320">
      <span class="cssbox_full"><img src="https://unsplash.it/1280/768?image=1025"></span>
    </a>
    <a class="cssbox_close" href="#void"></a>
    <a class="cssbox_prev" href="#image2"><</a>
  </div>



相关链接


易助科技网效果演示地址:  http://demo.easyzone.net.cn/plugin/cssbox/index.html