歪歪扭扭的图片展示.

首页 > 程序 > 歪歪扭扭的图片展示.

作者：ghostry 发布时间：2012-01-10 浏览: 4556

转载注明出处: https://blog.ghostry.cn/program/%E6%AD%AA%E6%AD%AA%E6%89%AD%E6%89%AD%E7%9A%84%E5%9B%BE%E7%89%87%E5%B1%95%E7%A4%BA.html

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
		ul.polaroids { width: 970px; margin: 0 0 18px -30px; }
		ul.polaroids li { display: inline; }
		ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
		ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; }
		ul.polaroids a:after { content: attr(title); }
		ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); }
		ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px;  -moz-transform: none; }
		ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg); }
		ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
		ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }
		ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
		ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }
    </style>
</head><body><ul class="polaroids"><li><a href="http://www.flickr.com/photos/zurbinc/3971679981/" data-ke-src="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland！"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="Roeland！" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3985295842/" data-ke-src="http://www.flickr.com/photos/zurbinc/3985295842/" title="讨论"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="讨论" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3993123611/" data-ke-src="http://www.flickr.com/photos/zurbinc/3993123611/" title="丰盛的笑"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="丰盛的笑" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/4001991326/" data-ke-src="http://www.flickr.com/photos/zurbinc/4001991326/" title="邪马特编码"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="邪马特编码" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/4001992350/" data-ke-src="http://www.flickr.com/photos/zurbinc/4001992350/" title="阿曼达刺眼... ..."> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="阿曼达刺眼... ..." /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/4001229589/" data-ke-src="http://www.flickr.com/photos/zurbinc/4001229589/" title="涂鸦乱画..."> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="涂鸦" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3957026139/" data-ke-src="http://www.flickr.com/photos/zurbinc/3957026139/" title="该Dougernaut"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="该Dougernaut" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3428777148/" data-ke-src="http://www.flickr.com/photos/zurbinc/3428777148/" title="我看你！"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="我看你！" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3799720274/" data-ke-src="http://www.flickr.com/photos/zurbinc/3799720274/" title="石坚高尔夫球"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="石坚高尔夫球" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3799719490/" data-ke-src="http://www.flickr.com/photos/zurbinc/3799719490/" title="滚球球"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="滚球球" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3888563172/" data-ke-src="http://www.flickr.com/photos/zurbinc/3888563172/" title="鲍里斯“塔图”"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="鲍里斯“塔图”" /> </a> </li><li><a href="http://www.flickr.com/photos/zurbinc/3427934527/" data-ke-src="http://www.flickr.com/photos/zurbinc/3427934527/" title="运动鞋和高跟鞋"> <img src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" data-ke-src="http://farm3.staticflickr.com/2500/4001991326_e29f2b5a6f_m.jpg" alt="运动鞋和高跟鞋" /> </a> </li></ul></body></html>

提示：您可以先修改部分代码再运行

标签: position rgba html serif text none position css3

上一篇: 运行代码框
下一篇: 鼠标放上显示浮动层