纯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="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="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="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="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="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="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="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="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="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
