♩ 背景
- 今天在做后台管理 CMS 时,对于小图片的显示感觉太大了会浪费页面空间,想着在鼠标滑动时可以缓慢放大就好.
♪ 知识点
①. transform:scale()
用法:transform: scale(0.5) 或者 transform: scale(0.5, 2);
参数表示缩放倍数;
1. 一个参数时:表示水平和垂直同时缩放该倍率
2. 两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。
②. transition
♫ 代码实现
①. 部分布局代码:
<tr class="tr-menu-6">
<td>6</td>
<td>《东京食尸鬼》</td>
<td class="td-todayWord">
<img src="/home/images/ps6.png" class="layui-circle">
</td>
<td>你觉得被圈养的鸟儿为什么无法自由地翱翔天际?是因为鸟笼不是属于它的东西</td>
<td>2018-01-12 03:31:59</td>
</tr>
②. CSS 核心代码参考
.td-todayWord img{
cursor: pointer;
transition: all 0.6s;
width: 50px;
}
.td-todayWord img:hover{
transform: scale(5);
position:relative;
z-index:100;
}
♬ 效果比较
- 鼠标划过前
- 鼠标划过后
- 上述 CSS 代码,如果去掉
position:relative; z-index:100;
,则图片不会覆盖其他.