CSS 动画：卡宽度在悬停时展开

在本教程中，您将学习如何创建具有悬停效果的纯 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);
}

我们使用此代码片段制作了一个图片库动画

感谢您的阅读❤️！