卡片 · Polite Wombat

类型：组件　·　分类：卡片　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

<div class="container">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
</div>
<style>
/* From Uiverse.io by G4b413l - Tags: card, animated */
.container {
  display: flex;
  gap: 10px;
}

.card {
  background-color: #fff;
  height: 100px;
  width: 100px;
  flex: 1;
  border-radius: 16px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card:hover {
  flex: 2;
  background-color: #b8b8b8;
}
</style>

[/hidecontent]