纯CSS 图片演示
<!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 图片演示的更多相关文章
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
- CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 纯CSS实现二级下拉导航菜单
这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: < ...
- 纯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 ...
- 简单而兼容性好的Web自适应高度布局，纯CSS
纯CSS实现的自适应高度布局,中间内容不符自动滚动条.兼容IE9以上.chrome.FF.关键属性是box-sizing: border-box. 不废话,直接上代码: <!doctype ht ...
随机推荐
- 理解Docker（7）：Docker 存储 - AUFS
(1)Docker 安装及基本用法 (2)Docker 镜像 (3)Docker 容器的隔离性 - 使用 Linux namespace 隔离容器的运行环境 (4)Docker 容器的隔离性 - 使用 ...
- java 多线程 Synchronized方法和方法块 synchronized(this)和synchronized(object)的理解
synchronized 关键字,它包括两种用法:synchronized 方法和 synchronized 块. 1. synchronized 方法:通过在方法声明中加入 synchronized ...
- Linux shell redirect
Learn much from here Learn much from here
- ubuntu14.04 yuv文件的播放及视频信息的查看
1.安装ffmpeg sudo add-apt-repository ppa:mc3man/trusty-media sudo apt-get update sudo apt-get install ...
- 安全测试 - SQL注入
1. 工具测试: 使用SQLMAP进行扫描 2. 手工测试: 观察参数的值value是否为数字型.如果是数字型进行数字型测试,否则跳到第4步进行字符型测试(例如如果出现a那说明是字符型,如果出现2则将 ...
- codevs 1472 体检
题目描述 Description 郑厂长不是正厂长 也不是副厂长 他根本就不是厂长 只是公司的一个码农 郑厂长所在的公司每一年都要组织员工体检,比如量身高体重.测血压之类的,今年也不例外. 这次总共有 ...
- Linux 共享内存详解一
共享内存段被多个进程附加的时候,如果不是所有进程都已经调用shmdt,那么删除该共享内存段时,会出现一个临时的不完整的共享内存段(key值是0),无法彻底删除.只有当所有进程都调用shmdt,这个临时 ...
- [LeetCode] Non-overlapping Intervals 非重叠区间
Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...
- [LeetCode] Single Number 单独的数字
Given an array of integers, every element appears twice except for one. Find that single one. Note:Y ...
- 内核控制Meta标签：让360浏览器默认使用极速模式打开网页(转)
为了让网站页面不那么臃肿,也懒的理IE了,同时兼顾更多的国内双核浏览器,在网页页头中添加了下面两行Meta控制标签. 1,网页头部加入 <meta name="renderer&quo ...