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

利用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>

猜你喜欢

转载自blog.csdn.net/lixiaosenlin/article/details/108372955