纯CSS实现便利贴效果

<!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
![微信图片_20170527113419.png](http://upload-images.jianshu.io/upload_images/6178068-fda088b6791e9c3f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容