<!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. [转]How to override HandleUnauthorizedRequest in ASP.NET Core

    本文转自:http://quabr.com/40446028/how-to-override-handleunauthorizedrequest-in-asp-net-core I'm migrati ...

  2. web.xml中的welcome-file-list不起作用

    今天尝试使用struts2+ urlrewrite+sitemesh部署项目,结果发现welcome-file-list中定义的欢迎页不起作用: <welcome-file-list> & ...

  3. CANopen学习——PDO

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

  4. iOS网络编程

    今天的重点是UIWebView.NSURLSession.JSon. 网络编程联网准备:1.在Info.plist中添加AppTransportSecurity类型Dictionary:2.在AppT ...

  5. UploadHandleServlet

    public class UploadHandleServlet extends HttpServlet { public void doGet(HttpServletRequest request, ...

  6. Android实现类似换QQ头像功能(图片裁剪)

    现在几乎所有的App都有用户登录模块,需要设置用户头像,而关于用户头像部分无疑也是比较头疼的,目前大部分应用的头像部分会有两种方式:一种是利用系统的裁剪功能去获取用户头像,一种就是获取到图片或者照片的 ...

  7. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  8. celery 框架

    转自:http://www.cnblogs.com/forward-wang/p/5970806.html 生产者消费者模式 在实际的软件开发过程中,经常会碰到如下场景:某个模块负责产生数据,这些数据 ...

  9. React JS的基本用法［ES5，纯前端写法］

    1.配置webpack npm install -g webpack #webpack的cli npm install -g webpack-dev-server #webpack自带的服务器 npm ...

  10. [HTML5] Blob对象

    写在前面 本篇主要总结Blob对象属性及作用,通过DEMO介绍Blob对象的应用场景. Blob对象 一直以来,JS都没有比较好的可以直接处理二进制的方法.而Blob的存在,允许我们可以通过JS直接操 ...