css实现便利贴效果

最新推荐文章于 2022-01-21 15:42:28 发布

JackieDYH

最新推荐文章于 2022-01-21 15:42:28 发布

阅读量1.1k

点赞数 3

分类专栏： HTML 文章标签：便利贴效果 css3

本文链接：https://blog.csdn.net/JackieDYH/article/details/104891743

版权

HTML 专栏收录该内容

174 篇文章 26 订阅

订阅专栏


<!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>

JackieDYH

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
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="...
复制链接

扫一扫