<!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. CANopen学习——PDO

    查找资料时,发现一个很好的博客,博主剖析的通俗易懂 http://www.cnblogs.com/winshton/p/4897556.html   PDO定义: 过程数据对象,用来传输实时数据.因为 ...

  2. index+match函数在压实度中对盒号盒质量随机不重复的最佳使用

    首先按照升序排列好盒号和盒质量,使其一一对应, 盒号    盒重量    随机值rand()     随机值大小排列rank 1         2001       0.01             ...

  3. Winform进程、线程

    进程: 一般来说,一个程序就是一个进程,不过也有一个程序需要多个进程支持的情况. 进程要使用的类是:Process它在命名空间:System.Diagnostics; 1.静态方法Start(); 2 ...

  4. Struts2 验证码图片实例

    本文转载于DongLiYang的博客http://www.cnblogs.com/dongliyang/archive/2012/08/24/2654431.html 其中修改过一部分,针对使用注解而 ...

  5. [LeetCode] Nim Game 尼姆游戏

    You are playing the following Nim Game with your friend: There is a heap of stones on the table, eac ...

  6. [LeetCode] Find the Duplicate Number 寻找重复数

    Given an array nums containing n + 1 integers where each integer is between 1 and n (inclusive), pro ...

  7. jQuery种种

    jquery UI autocomplete获得焦点自动弹出跟随下拉框--http://blog.csdn.net/jiusong_mi/article/details/49249853 $(&quo ...

  8. Python Numpy,Pandas基础笔记

    Numpy Numpy是python的一个库.支持维度数组与矩阵计算并提供大量的数学函数库. arr = np.array([[1.2,1.3,1.4],[1.5,1.6,1.7]])#创建ndarr ...

  9. myeclipse配置maven

    1.首先配置好java的运行环境(JDK要1.7及以上版本),网上有详细资料. 2.下载maven,具体下载链接http://maven.apache.org/download.html 3.下载ap ...

  10. React.js 官网入门教程 分离文件 操作无法正常显示HelloWord

    对着React官网的教程练习操作,在做到分离文件练习时,按照官网步骤来却怎么也无法正常显示HelloWord. 经测试,html文件中内容改为: <!DOCTYPE html><ht ...