纯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 ...
随机推荐
- python教程与资料
网上有个人写的python快速教程,非常好.比看书好多了.猛击下面的链接地址 http://www.douban.com/group/topic/30008503/ python文档资料收集 pyth ...
- 基于英特尔® 至强 E5 系列处理器的单节点 Caffe 评分和训练
原文链接 在互联网搜索引擎和医疗成像等诸多领域,深度神经网络 (DNN) 应用的重要性正在不断提升. Pradeep Dubey 在其博文中概述了英特尔® 架构机器学习愿景. 英特尔正在实现 Prad ...
- JSP动作元素——————实践篇
本篇在理论的基础上实现不同JSP页面间的跳转 使用 Eclipse Java EE IDE 创建一个新的 Java Web 项目,具体步骤如下: (1)启动 Eclipse Java EE IDE,在 ...
- C#终于支持可选参数了!
今天偶然看了一下C#4.0的新特性, 第一个新特性就令我兴奋不已, 曾经一度令我使用C#很不习惯的"死参数"问题终于搞定了.实在太爽了! 过去用C++, VB.NET的时候都很爽, ...
- 索引超出了数组界限(Microsoft.SqlServer.Smo)
SSMS连接远程SQL Server服务器是很方便的. 昨天我用SQL Server 2008 SSMS连接SQL Server 2012竟然报错,如下图: 在网上搜了,参考这个参考那个,太啰嗦了,确 ...
- Python学习--Python 环境搭建
Python环境搭建 Python是跨平台的编程语言,可应用于Windows.Linux.Mac OS X.你可以通过终端窗口输入"python"命令来查看本地是否安装了Pytho ...
- MyBatis中collection (一对一，一对多)
MyBatis学习:http://www.mybatis.org/mybatis-3/zh/index.html 大对象InsuranceDetailsVO: com.quicksure.mobile ...
- WATERHAMMER: A COMPLEX PHENOMENON WITH A SIMPLE SOLUTION
开启阅读模式 WATERHAMMER A COMPLEX PHENOMENON WITH A SIMPLE SOLUTION Waterhammer is an impact load that is ...
- DedeCMS使用方法----如何将网站上传到服务器
我们如果在本地已经把网站做好了,上传到服务器上去的正确姿势是什么样的呢?简单的很~跟着我的步调来~ 方法一(推荐此方法): 1.把你本地所有的文件压缩,上传至服务器上的根目录,再解压. 2.把本地的数 ...
- 动态规划之最长公共子序列(LCS)
转自:http://segmentfault.com/blog/exploring/ LCS 问题描述 定义: 一个数列 S,如果分别是两个或多个已知数列的子序列,且是所有符合此条件序列中最长的,则 ...