css实现便利贴效果 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>便利贴</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            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 {
            margin: 1em;
            float: left;
        }

        ul li a {
            text-decoration: none;
            color: #000;
            background: #ffc;
            display: block;
            width: 10em;
            height: 10em;
            padding: 1em;
            box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
            transition: transform 0.15s linear;
        }

        ul li  a h2 {
            font-size: 140%;
            font-weight: bold;
            padding-bottom: 10px;
        }
        ul li p {
            font-size:180%;
        }

        ul li a {
            transform:rotate(-6deg);
        }
        /* odd even */
        ul li:nth-child(even) a {
            transform: rotate(4deg);
            position: relative;
            top:5px;
            background: #cfc;
        }

        ul li:nth-child(3n) a {
            transform: rotate(-3deg);
            position: relative;
            top:-5px;
            background: #ccf;
        }

        ul li a:hover ,ul li a:focus{
            box-shadow: 10px 10px 7px rgba(0,0,0,.7);
            transform: scale(1.25);
            position: relative;
            z-index: 5;
        }
    </style>
</head>

<body>

    <ul>
        <li>
            <a href="javascript:;">
                <h2>Title #1</h2>
                <p>
                    Text Content #1
                </p>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <h2>Title #1</h2>
                <p>
                    Text Content #1
                </p>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <h2>Title #1</h2>
                <p>
                    Text Content #1
                </p>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <h2>Title #1</h2>
                <p>
                    Text Content #1
                </p>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <h2>Title #1</h2>
                <p>
                    Text Content #1
                </p>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <h2>Title #1</h2>
                <p>
                    Text Content #1
                </p>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <h2>Title #1</h2>
                <p>
                    Text Content #1
                </p>
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <h2>Title #1</h2>
                <p>
                    Text Content #1
                </p>
            </a>
        </li>

        <li>
            <a href="javascript:;">
                <h2>Title #1</h2>
                <p>
                    Text Content #1
                </p>
            </a>
        </li>
    </ul>






</body>

</html>

 

posted @ 2022-11-21 21:45  JackieDYH  阅读(20)  评论(0)  编辑  收藏  举报  来源