纯css3精美lightbox效果

当前位置:主页 > CSS3库 > CSS3动画 > 纯css3精美lightbox效果
纯css3精美lightbox效果
分享:

    插件介绍

    一款使用纯css3制作的精美的Lightbox效果。这个lightbox效果共有三种展示图片的效果:渐隐效果,淡入淡出效果和全屏放大在缩小效果。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-12
    阅读:

简要教程

这款css3 lightbox效果中的精美插图来自于花瓣

HTML

<ul class="lb-album">
  <li>
    <a href="#image-1">
      <img src="images/thumbs/1.jpg" alt="image01">
      <span>Pointe</span>
    </a>
    <div class="lb-overlay" id="image-1">
      <img src="images/full/1.jpg" alt="image01" />
      <div>
        <h3>pointe <span>/point/</h3>
        <p>Dance performed on the tips of the toes</p>
        <a href="#image-10" class="lb-prev">Prev</a>
        <a href="#image-2" class="lb-next">Next</a>
      </div>
      <a href="#page" class="lb-close">x Close</a>
    </div>
  </li>
  <li> 
    <!-- ... --> 
  </li>
</ul>
                

css代码请参考下载文件。