<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta http-equiv="Content-Language" content="zh-cn" />

    <link rel="stylesheet" type="text/css" href="tepian.css" />

    <title>图片框</title>

</head>

<body>

<div class="center">

     <h1>CSS3 Image Gallery</h1>

     <p>with a 3D Lightbox Effect</p>

     <p>A CSS3 presentation demonstrating how to take advantage of modern browsers while still allowing the content to be easily accessible in older, less capable browsers.</p>

</div>

<ul class="tupian">

     <li>

         <a href="#inf1"><img src="data:images/lanterns.jpg" alt="丢失" /> </a>

         <div class="details"><p>Lantems</p><a class="anniu" href="#inf1">view details</a> </div>

     </li>

    <li>

        <a href="#inf2"><img src="data:images/tree.jpg" alt="丢失" /> </a>

        <div class="details"><p>Lantems</p><a class="anniu" href="#inf2">view details</a> </div>

    </li>

    <li>

        <a href="#inf3"><img src="data:images/cablecar.jpg" alt="丢失" /> </a>

        <div class="details"><p>Lantems</p><a class="anniu" href="#inf3">view details</a> </div>

    </li>

    <li>

        <a href="#inf4"><img src="data:images/londoneye.jpg" alt="丢失" /> </a>

        <div class="details"><p>Lantems</p><a class="anniu" href="#inf4">view details</a> </div>

    </li>

    <li>

        <a href="#inf5"><img src="data:images/statue.jpg" alt="丢失" /> </a>

        <div class="details"><p>Lantems</p><a class="anniu" href="#inf5">view details</a> </div>

    </li>

    <li>

        <a href="#inf6"><img src="data:images/bridge.jpg" alt="丢失" /> </a>

        <div class="details"><p>Lantems</p><a class="anniu" href="#inf6">view details</a> </div>

    </li>

    <li>

        <a href="#inf7"><img src="data:images/maiden.jpg" alt="丢失" /> </a>

        <div class="details"><p>Lantems</p><a class="anniu" href="#inf7">view details</a> </div>

    </li>

    <li>

        <a href="#inf8"><img src="data:images/clouds.jpg" alt="丢失" /> </a>

        <div class="details"><p>Lantems</p><a class="anniu" href="#inf8">view details</a> </div>

    </li>

    <li>

        <a href="#inf9"><img src="data:images/statue2.jpg" alt="丢失" /> </a>

        <div class="details"><p>Lantems</p><a class="anniu" href="#inf9">view details</a> </div>

    </li>

</ul>

      <ul>

          <li id="inf1"> <div class="xinxi"><p>信息:图片1</p> <p>这是一个演示 图片1</p><a href="#" class="close">X</a></div>  </li>

          <li id="inf2"> <div class="xinxi"><p>信息:图片1</p> <p>这是一个演示 图片2</p><a href="#" class="close">X</a></div>  </li>

          <li id="inf3"> <div class="xinxi"><p>信息:图片1</p> <p>这是一个演示 图片3</p><a href="#" class="close">X</a></div>  </li>

          <li id="inf4"> <div class="xinxi"><p>信息:图片1</p> <p>这是一个演示 图片4</p><a href="#" class="close">X</a></div>  </li>

          <li id="inf5"> <div class="xinxi"><p>信息:图片1</p> <p>这是一个演示 图片5</p><a href="#" class="close">X</a></div>  </li>

          <li id="inf6"> <div class="xinxi"><p>信息:图片1</p> <p>这是一个演示 图片6</p><a href="#" class="close">X</a></div>  </li>

          <li id="inf7"> <div class="xinxi"><p>信息:图片1</p> <p>这是一个演示 图片7</p><a href="#" class="close">X</a></div>  </li>

          <li id="inf8"> <div class="xinxi"><p>信息:图片1</p> <p>这是一个演示 图片8</p><a href="#" class="close">X</a></div>  </li>

          <li id="inf9"> <div class="xinxi"><p>信息:图片1</p> <p>这是一个演示 图片9</p><a href="#" class="close">X</a></div>  </li>

      </ul>

</body>

</html>

　　

index.html

body{

    background: #ddd;

    font-family: Arial, Helvetica, sans-serif;  ;

}

.center{

    margin: auto;

    text-align:center;

    width:600px; height:180px ;

    padding:0;

}

.center h1{

    font-size: 68px;

    letter-spacing: -3px;

    font-weight: bold;

    margin: 0;

}

.center p:first-of-type{

    font-size: 38px;

    margin: 0;

    color: rgba(51, 51, 51, 0.5);

}

.center p{

    color: #333;

}

ul.tupian{

    list-style-type: none;

    width:1000px; height:800px ;

    margin: auto;

    padding: 0;

}

ul.tupian li{

    position: relative;

       float:left;

        margin:15px;

    width: 270px; height:190px ;

      overflow: hidden;

    border-radius: 5px;

    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

    -webkit-transition: all 0.15s  ease-in ;

    transition: all 0.15s  ease-in ;

}

ul.tupian li:hover{

    z-index: 11;

    -webkit-transform: scale(1.2) translate3d(0, -30px, 0) rotate(2.5deg);

    transform: scale(1.2) translate3d(0, -30px, 0) rotate(2.5deg);

}

div.details{

    border-bottom-left-radius: 5px;

    border-bottom-right-radius: 5px;

    position: absolute;

    bottom: 0px;

    padding: 10px 0px 10px 0px;

    width: 270px;

    background: rgba(255, 255, 255, 0.7);

}

div.details p {

    padding-left: 10px;

    margin: 0;

    float: left;

    font-size: 15px;

}

div.details a.anniu {

    position: absolute;

    padding: 5px 7px 5px 7px;

    top: 5px;

    right: 7px;

    background-color: rgba(0, 0, 0, 0.13);

    color: #0090e2;

    font-size: 12px;

    border-radius: 15px;

    text-decoration: none;

    -webkit-transition: all 0.15s ease-in;

    transition: all 0.15s ease-in;

}

div.details a.anniu:hover{

    background-color: #0090e2; color: #fff;

}

ul.tupian   img{

    width: 270px;

    height:190px ;

}

li[id]{

    overflow: hidden;

    position: absolute;

    width: 0px;

    height: 0px;

    left: 0;

    top: 0;

    opacity: 0;

    background: rgba(0,0,0,.8);

    -webkit-transition: opacity 0.2s cubic-bezier(0,0,0,1);

    transition: opacity 0.2s cubic-bezier(0,0,0,1);

}

li[id]:target div.xinxi{

      width: 400px; height: 200px;

    position: relative;

    margin: 0 auto;

    top: 15%;

    background: #fff;

    border: 1px solid;

    padding: 0;

}

div.xinxi p:first-child {

    background-color: #0090E2;

    padding: 10px;

    margin: 0;

}

a.close{

    background: #000;

    position: absolute;

    top: -10px;

    right: 10px;

    line-height: 0;

    color: #fff;

    text-align: center;

    font-weight: bold;

    border: 2px solid #fff;

    padding: 12px 9px 9px;

    border-radius: 30px;

}

li[id]:target{

    width: 100%;

    height: 100%;

    opacity: 1;

    z-index: 30;

    position: fixed;

   top: 0px

;

    overflow-x: hidden;

    /* overflow-y: scroll; */

    margin-bottom: 25px;

}

　　

tepian.css

纯CSS 图片演示的更多相关文章

  1. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  3. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  4. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  5. 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  6. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  7. 纯CSS实现二级下拉导航菜单

    这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...

  8. 纯CSS完成tab实现5种不同切换对应内容效果

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  9. 简单而兼容性好的Web自适应高度布局，纯CSS

    纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...

随机推荐

  1. centos mysql开启远程访问

    登录MySQL:  mysql -u root -p db; 如需修改密码,第一次:  mysqladmin -u root password NEWPASSWORD 已设置过:  mysqladmi ...

  2. Windows Server 2008 R2 NTP服务器

    Server 1.查看服务器信息 w32tm /query /status 2.设置同步地址 w32tm /config /manualpeerlist:time.windows.com /syncf ...

  3. uva 129 krypton factors ——yhx

     Krypton Factor  You have been employed by the organisers of a Super Krypton Factor Contest in which ...

  4. HBase Zookeeper 安装学习

    https://my.oschina.net/hanzhankang/blog/129335 http://blog.itpub.net/27099995/viewspace-1394831/ htt ...

  5. jQuery.extend 函数详解

    JQuery的extend扩展方法:      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解.      一.Jquery的扩展方 ...

  6. libsvm的数据格式及制作

    1.libsvm数据格式 libsvm使用的训练数据和检验数据文件格式如下: [label] [index1]:[value1] [index2]:[value2] … [label] [index1 ...

  7. [LeetCode] Contains Duplicate III 包含重复值之三

    Given an array of integers, find out whether there are two distinct indices i and j in the array suc ...

  8. C#进阶系列——WebApi 异常处理解决方案

    前言:上篇C#进阶系列——WebApi接口传参不再困惑:传参详解介绍了WebApi参数的传递,这篇来看看WebApi里面异常的处理.关于异常处理,作为程序员的我们肯定不陌生,记得在介绍 AOP 的时候 ...

  9. 前端小知识点---html换行被解析为空格的相关知识

    这个系列主要记录一下常被忽略但又经常产生影响的知识点,纯做个记录,方便查询 html换行被解析为空格也是常说的3像素空隙的问题,根据测试不同浏览器产生的空隙大小会不一样,Chrome,Firefox, ...

  10. python 补漏计划

    从今天开始把python的细枝末节都梳理下 争取 每星期 两篇博文