纯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 ...
随机推荐
- 《Note --- Unreal 4 --- behavior tree》
Web: https://docs.unrealengine.com/latest/INT/Engine/AI/BehaviorTrees/index.html Test project: D:\En ...
- 局域网象棋游戏（C++实现，使用Socket，界面使用Win32，CodeBlocks+GCC编译）
目录 成果 运行效果图 过程 1. 首先的问题是下棋的两端应该是什么样的? 2. 接下来的问题是怎么表示,怎么存储? 3. 然后应该怎么通信呢? 代码 main.cpp chinese_chess.h ...
- JavaScript第一节课
1.用法:位于<script></script>可以位于body和head中,不限制标签数量,也可以创建外部Js文件,然后引入.(引入方法:<script src=&qu ...
- POJ 1637 Sightseeing tour
Sightseeing tour Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9276 Accepted: 3924 ...
- python 第一章学习课程
http://www.runoob.com/python/python-dictionary.html
- 分分钟带你玩转 Web Services
当大型需求被数个公司分割开来,各公司系统相互交换数据的问题就会接踵而来. 毕竟是多家不同的公司的产品,研发开发语言.采用技术框架基本上是百花齐放. 怎样让自家系统提供的服务具有跨平台.跨语言.跨各种防 ...
- 数塔取数 基础dp
从低端向上,每个结点取下一层左右结点最大值和本身价值相加,dp[0][0]为最后结果 #include<iostream> #include<algorithm> #inclu ...
- 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...
- acm结束了
最后一场比赛打完了.之前为了记录一些题目,开了这个博客,现在结束了acm,这个博客之后也不再更新了. 大家继续加油!
- 神秘代理-Proxy
前言: 代理模式作为常见的设计模式之一,在项目开发中不可或缺.本文就尝试着揭开代理的神秘面纱,也欢迎各路人批评指正! 1.如何实现代理: [假设有个关于汽车移动(move)的计时需求]设计:Movea ...