页码缩放
案例需求：
- 当鼠标经过，页码会放大，鼠标离开，页码恢复大小
案例
...
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>
输出结果
1.png
鼠标经过1变大.png
鼠标经过4变大.png
