在本教程中,您将学习如何创建具有悬停效果的纯 CSS 卡片宽度展开动画。
悬停时卡片宽度扩大
如果您想创建这种类型的动画,只需使用以下 CSS 代码片段即可。
CSS代码
.container {
display: flex;
}
.card {
height: 200px;
background: rgb(48, 207, 232);
flex: 1;
transition: 0.3s;
}
.card:hover {
flex: 3;
background: rgb(12, 171, 195);
}
我们使用此代码片段制作了一个图片库动画
感谢您的阅读❤️!