HTML+CSS实现鼠标滑过分页按钮时放大效果

最新推荐文章于 2022-08-15 16:11:59 发布

一笑程序猴

最新推荐文章于 2022-08-15 16:11:59 发布

阅读量6k

点赞数 1

分类专栏：前端技术文章标签： css按钮动画分页按钮放大 li实现圆角分页按钮鼠标悬浮按钮放大

本文链接：https://blog.csdn.net/lixiaosenlin/article/details/108372955

版权

技术同时被 2 个专栏收录

62 篇文章 2 订阅

订阅专栏

前端

53 篇文章 3 订阅

订阅专栏

利用html+css实现当鼠标滑过分页按钮时，按钮自动放大的效果

<!DOCTYPE html>
<html>

<head>
    <title>demo</title>
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            line-height: 30px;
            margin: 10px;
            border: 1px solid pink;
            text-align: center;
            cursor: pointer;
            list-style: none;
            transition: all 0.4s;
            border-radius: 50%;
        }

        li:hover {
            transform: scale(1.2)
        }
    </style>
</head>

<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>
        <li>9</li>
        <li>10</li>
    </ul>
</body>

</html>