纯CSS实现便利贴效果
2017-05-27 本文已影响0人
郭钰涛
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 1200px;
height: 300px;
background-color: #ccc;
}
ul{
margin: 100px auto;
}
ul,li{
list-style:none;
}
/*标签样式 阴影效果*/
ul li a{
text-decoration: none;
width: 150px;
height: 150px;
/*border:1px solid red;*/
list-style: none;
float: left;
margin: 15px;
display:block;
background: white;
box-shadow:8px 8px 8px 7px rgba(0,0,0,0.5)
}
ul li:nth-child(even) a {
transform:rotate(10deg);
background: pink;
}
ul li a {
transform:rotate(-10deg);
}
/*鼠标悬停触发事件*/
ul li:hover a{
transform:scale(1.25,1.25);
}
</style>
</head>
<body>
<!-- 写几个相同的Li标签和内容 -->
<ul>
<li>
<a href="#">
<h2>sdffds</h2>
<p>sdfdsf</p>
</a>
</li>
<li>
<a href="#">
<h2>sdffds</h2>
<p>sdfdsf</p>
</a>
</li>
<li>
<a href="#">
<h2>sdffds</h2>
<p>sdfdsf</p>
</a>
</li>
<li>
<a href="#">
<h2>sdffds</h2>
<p>sdfdsf</p>
</a>
</li>
</ul>
</body>
</html>
```shi
