<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background:#000; } ul.polaroids li{ display:inline; } ul.polaroids a{ background:#fff; display:inline; float:left; margin:0 0 27px 30px; auto; padding:10px 10px 15px; text-align:center; text-decoration:none; color: #333; font-size:18px; /* 为图片外框设计阴影效果 */ -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25); /* 顺时针旋转2 */ -webkit-transform:rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; } ul.polaroids img{ display:block; height:100px; margin-bottom:12px; } /* 在a标签的后边 插入 内容 attr:(title) 也就是标签a中的title */ ul.polaroids a:after{ content:attr(title); } ul.polaroids li:nth-child(even) a{ -webkit-transform: rotate(5deg); } ul.polaroids li:nth-child(2n) a{ position:relative; top:-5px; /* 顺时针旋转10度 */ -webkit-transform:rotate(-10deg); } ul.polaroids li:nth-child(4n) a{ position:relative; right:5px; top:8px; } ul.polaroids li:nth-child(5n) a{ position:relative; left:-5px; top:3px; } ul.polaroids li a:hover{ /* 放大对象1.25倍 */ -webkit-transform:scale(1.25); -webkit-box-shadow:0 3px 6px rgba(0,0,0,.5); position:relative; z-index:5; } </style> </head> <body> <ul class="polaroids"> <li><a href="1" title="cat1"><img src="img/cat1.jpg" alt=""></a></li> <li><a href="2" title="cat1"><img src="img/cat2.jpg" alt=""></a></li> <li><a href="3" title="cat1"><img src="img/cat3.jpg" alt=""></a></li> <li><a href="4" title="cat1"><img src="img/cat4.jpg" alt=""></a></li> <li><a href="5" title="cat1"><img src="img/cat5.jpg" alt=""></a></li> <li><a href="6" title="cat1"><img src="img/cat6.jpg" alt=""></a></li> <li><a href="7" title="cat1"><img src="img/cat7.jpg" alt=""></a></li> <li><a href="8" title="cat1"><img src="img/cat8.jpg" alt=""></a></li> </ul> </body> </html>