今天html的项目差不多到了收尾阶段,最后给每个小模块加一个鼠标悬停触发的特效
代码如下:
.box li {
width: 23%;
height: 120px;
background-color: #f3f3f3;
margin-left: 5%;
margin-top: 15px;
border-radius: 8px;
box-shadow: 0px 0px 3px 1px #ccc;
float: left;
transition: 0.4s;
}
.box li:hover {
transition: 0.4s;
scale: (1.1);
box-shadow: 0px 0px 20px #ccc;
}
其实.box li 前面的都不是重点,最后那个transition:0.4s才是核心,搭配.box li:hover可以完成如下效果:
个人感觉还是美观了不少......