1、框内放大图片+阴影
效果图：
.lists{
display: flex;
margin-top: 100px;
justify-content: center;
}
.item{
width: 200px;
color: #333;
text-decoration: none;
border: 1px solid #eee;
transition: all 0.5s;
}
.item .item_pic{
width: 200px;
height: 200px;
overflow: hidden;
}
.item .item_pic img{
width: 100%;
height: 100%;
transition: all 0.5s;
}
.item:hover .item_pic img{
transform: scale(1.1);
}
.item:hover{
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.item_content{
padding: 20px 10px;
}
2、缓动上滑+阴影
这个样式很典型，比如花瓣网、掘金的活动栏目。
当div上移的时候，还是可以很清楚的看到字体模糊了，可以把字体缩小点，上移的幅度设置成一个像素。
效果图：
.lists{
display: flex;
margin-top: 100px;
justify-content: center;
}
.item{
width: 200px;
color: #333;
text-decoration: none;
border: 1px solid #eee;
transition: all 0.5s;
margin-right: 20px;
}
.item .item_pic{
width: 200px;
height: 200px;
overflow: hidden;
}
.item .item_pic img{
width: 100%;
height: 100%;
transition: all 0.5s;
}
.item:hover{
/-1或者
最低0.47元/天 解锁文章
743
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
