<!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. android安卓Sqlite数据库实现用户登录注册

    看了很多别人写的安卓SQlite数据的操作代码,一点也不通俗易懂,我觉得我写的不错,而且安卓项目也用上了,所以在博客园里保存分享一下!建立一个类 并继承SQLiteOpenHelper public ...

  2. python学习笔记-import utils报错

    今天遇到一个坑爹的问题,查找了半天原因,终于解决了,在此特地记录一下. 运行环境:Windows eclipse 我在eclipse中配置了python的运行环境,在eclipse中编写python代 ...

  3. HTML 学习笔记 JavaScript（call方法详解）

    http://www.cnblogs.com/f-dream/p/4950918.html

  4. jquery each函数 break和continue功能

    jquery each函数 break和continue功能幸运的是另一个突破,持续一个jQuery循环方式.你可以打破在函数返回一个jQuery参数虚假循环.一个可以继续执行只是在做不指定返回值或返 ...

  5. 主席树——求静态区间第k大

    例题:poj2104 http://poj.org/problem?id=2104 讲解:http://blog.sina.com.cn/s/blog_6022c4720102w03t.html ht ...

  6. salt源码安装软件和yum安装软件

    上面简单列出了源码安装的sls文件书写思路. 涉及到一些固定的思路:如, 1,拷贝 解压安装时候需要依赖tar.gz存在 如果已安装则无需再次安装. 2,启动脚本 加入chk时候需要文件存在,如果已添 ...

  7. Linux 进程与线程五

    pthread_self函数 pthread_t pthread_self(void); 一般会成功,返回当前线程的ID 注意:在子线程中执行exit()函数会退出整个进程,一般使用pthread_e ...

  8. mongodb 速成笔记

    以下环境为mac osx + jdk 1.8 + mongodb v3.2.3 一.安装 brew安装方式是mac下最简单的方式 brew update brew install mongodb 其它 ...

  9. [LeetCode] 4Sum II 四数之和之二

    Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l) there are such t ...

  10. [LeetCode] Climbing Stairs 爬梯子问题

    You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...