卡片 · Fluffy Stingray

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

[hidecontent type="vip1"]

<div class="card">
  <span class="text">Go!</span>
</div>
<style>
/* From Uiverse.io by Javierrocadev - Tags: card, box-shadow */
.card {
  width: 150px;
  height: 150px;
  background: #a53c3c;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 3em;
  font-weight: 900;
  color: aliceblue;
  transition: all .5s ease-in-out;
}

.text {
  transition: all 0.3s ease-in-out;
}

.card:hover {
  box-shadow: 75px 75px 5px -20px #bf5e37, -75px 75px 5px -20px #d08432, -75px -75px 5px -20px #bf5e37 , 75px -75px 5px -20px #d08432;
  transform: rotate(-45deg);
}

.card:hover .text {
  transform: rotate(45deg);
}
</style>

[/hidecontent]