页码缩放
案例需求:
- css部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25...
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);
}
... - html部分
1
2
3
4
5
6
7
8
9
10
11
12<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>输出结果
![初始.png] (./2021-8-14-鼠标滑过,页码缩放/初始.png)
![经过1.png] (./2021-8-14-鼠标滑过,页码缩放/经过1.png)
![经过4.png] (./2021-8-14-鼠标滑过,页码缩放/经过4.png)如果对你有所帮助,欢迎点赞收藏哦,共同进步哦!!
加油学,学不fei就继续,你fei了吗?^ v ^
[简书源] https://www.jianshu.com/p/5e268c6cbadf
- 本文作者: it JinZhan
- 本文链接: http://example.com/2021/08/14/2021-8-14-鼠标滑过,页码缩放/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!