页码缩放demo

最新推荐文章于 2024-10-17 09:19:08 发布

手残程序员啊~

最新推荐文章于 2024-10-17 09:19:08 发布

阅读量69

点赞数

分类专栏： css3 HTML 文章标签： css html5 javascript

原文链接：https://www.jianshu.com/p/5e268c6cbadf

版权

HTML 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css3

7 篇文章 0 订阅

订阅专栏

页码缩放

案例需求：

当鼠标经过，页码会放大，鼠标离开，页码恢复大小

案例

...
        ul {
            margin: 100px auto;
        }
        
        li {
            width: 30px;
            height: 30px;
            border: 1px solid skyblue;
            text-align: center;
            line-height: 30px;
            list-style: none;
            float: left;
            border-radius: 15px;
            margin-right: 10px;
            /* 鼠标变小手 */
            cursor: pointer;
            /* transition 过度 */
            transition: all .3;
        }
        
        li:hover {
            transform: scale(1.2);
        }
 ...

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>