在完全不用js的前提下怎样实现九宫格分页显示呢??其实只有简单的两行主要代码!
直接上代码:
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.ulone{
width:330px;
margin:100px auto;
}
.ulone li{
width:98px;
height:100px;
margin:0 10px 10px 0;
background: #f00;
float: left;
border:1px solid #ffffff;
}
//这里就是重点了;
.ulone li:hover{ //伪类,当鼠标移入时;
transform:scale(2,2); //使li沿着分别x轴和y轴变为原来的两倍大小!
transition:transform 2s; //在两秒的时间内完成!
}
</style>
下面是一个简单的html布局
<ul class="ulone">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>