便签效果
<html>
<head>
<title>note</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-family: arial,sans-serif;
font-size: 100%;
margin: 3em;
background: #666;
color: #fff;
}
h2,p{
font-size: 100%;
font-weight: normal;
}
ul,li{
list-style: none;
}
ul{
overflow: hidden;
padding: 3em;
}
ul li a{
text-decoration: none;
color: #000;
background: #ffc;
display: block;
height: 10em;
width: 10em;
padding: 1em;
box-shadow: 5px 5px 7px rgba(33,33,33,0.7);
-webkit-transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
-ms-transform:rotate(-6deg);
transform:rotate(-6deg);
}
ul li:nth-child(even) a{
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
-ms-transform:rotate(4deg);
transform:rotate(4deg);
position: relative;
top: 5px;
background: #cfc;
}
ul li:nth-child(3n) a{
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
position: relative;
top: -5px;
background: #ccf;
}
ul li:nth-child(5n) a{
-webkit-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-ms-transform:rotate(7deg);
transform:rotate(7deg);
}
ul li a:hover,
ul li a:focus{
box-shadow: 10px 10px 7px rgba(0,0,0,0.7);
-webkit-transform:scale(1.25);
transform:scale(1.25);
-webkit-transition:-webkit-transform 0.15s linear;
transition:transform 0.15s linear;
position: relative;
z-index: 5;
}
ul li{
margin: 1em;
float: left;
}
ul li h2{
font-size: 140%;
font-weight: bold;
padding-bottom: 10px
}
ul li p{
font-family: "Reenie Beanie", arial,sans-serif,微软雅黑;
font-size: 110%;
}
</style>
</head>
<body>
<ul>
<li>
<a href="javascript:;" onclick="return false;">
<h2>A:</h2>
<p>recommend! recommend! recommend! recommend! recommend! recommend! recommend !recommend!</p>
</a>
</li>
<li>
<a href="javascript:;" onclick="return false;">
<h2>A:</h2>
<p>recommend! recommend! recommend! recommend! recommend! recommend! recommend !recommend!</p>
</a>
</li>
<li>
<a href="javascript:;" onclick="return false;">
<h2>A:</h2>
<p>recommend! recommend! recommend! recommend! recommend! recommend! recommend !recommend!</p>
</a>
</li>
<li>
<a href="javascript:;" onclick="return false;">
<h2>A:</h2>
<p>recommend! recommend! recommend! recommend! recommend! recommend! recommend !recommend!</p>
</a>
</li>
<li>
<a href="javascript:;" onclick="return false;">
<h2>A:</h2>
<p>recommend! recommend! recommend! recommend! recommend! recommend! recommend !recommend!</p>
</a>
</li>
<li>
<a href="javascript:;" onclick="return false;">
<h2>A:</h2>
<p>recommend! recommend! recommend! recommend! recommend! recommend! recommend !recommend!</p>
</a>
</li>
</ul>
</body>
</html>
