您的位置：首页 > Web前端 > CSS

css3 变形设计涂鸦墙

2016-04-08 12:06 387 查看

<!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;
width: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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航