1.先看效果。有动画效果,截图效果不大明显。copy代码运行可以展示完整效果。
2.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>照片展开</title>
<link rel="stylesheet" type="text/css" href="css/list.css"/>
</head>
<body>
<div id="box">
<ul>
<li>
<div class="wrapper deley">
<div class="bg"></div>
<h2>image1</h2>
<div class="detaction">
<div class="name">pic1</div>
<div class="close">x</div>
</div>
</div>
</li>
<li>
<div class="wrapper deley">
<div class="bg"></div>
<h2>image1</h2>
<div class="detaction">
<div class="name">pic2</div>
<div class="close">x</div>