css3六个图片说明效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="css/copy.css" >
<style type="text/css">
</style>
</head>
<body>
<div id="mainwrapper">
<div id="box-1" class="box">
<img src="images/n.jpg" id="image-1">
<span class="caption simple-caption">
<p>从下向上出现</p>
</span>
</div>
<div id="box-2" class="box">
<img src="images/n.jpg" id="image-2">
<span class="caption full-caption">
<p>从上向下出现</p>
</span>
</div>
<div id="box-3" class="box">
<img src="images/n.jpg" id="image-3">
<span class="caption fade-caption">
<p>渐隐出现渐隐出现渐隐出现渐隐出现渐隐出现</p>
</span>
</div>
<div id="box-4" class="box">
<img src="images/n.jpg" id="image-4">
<span class="caption slide-caption">
<p>从右向左出现</p>
</span>
</div>
<div id="box-5" class="box">
<div class="rotate">
<img src="images/n.jpg" id="image-5">
<span class="caption rotate-caption">
<p>图片旋转图片旋转图片旋转图片旋转</p>
</span>
</div>
</div>
<div id="box-6" class="box">
<img src="images/n.jpg" id="image-6">
<span class="caption scale-caption">
<h3>文字从左滑入</h3>
<p>图片放大</p>
</span>
</div>
</div>
</body>
</html>
