好看的css卡片样式

最新推荐文章于 2024-01-18 21:49:25 发布

yay4396

最新推荐文章于 2024-01-18 21:49:25 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43653355/article/details/129196395

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<style scoped lang="scss">
$shadow: 2px 4px 12px rgba(0,0,0,.08);
$shadow-active: 2px 4px 16px rgba(0,0,0,.16);

.group-card {
  border-radius: 20px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  transition: all .3s cubic-bezier(0, 0, .5, 1);

  &--blur {
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255, 255, 255, 0.72);
  }

  &--shadow {
    box-shadow: $shadow;

    &:hover {
      box-shadow: $shadow-active;
    }

    &:active {
      box-shadow: $shadow-active;
    }
  }

  &--hover {
    &:hover {
      transform: scale3d(1.01, 1.01, 1.01);
    }
  }

  &--active {
    &:active {
      transform: scale3d(0.97,0.97,0.97);
    }
  }
}
</style>