CSS圆形卡片 - CSS

在前端开发中，经常需要设计美观的卡片效果。因此，本篇文章介绍如何使用CSS构建圆形卡片效果，并提供代码示例方便程序员学习参考。

实现方法

CSS圆形卡片通常使用圆形的伪元素，如:before或:after来实现。我们可以利用伪元素设置卡片的圆形和背景色，并利用CSS3的transition和transform属性给卡片添加动画效果。

.card {
    position: relative; /* 定位 */
    width: 120px;
    height: 120px;
    border-radius: 50%; /* 圆形 */
    overflow: hidden; /* 隐藏溢出部分 */
    cursor: pointer; /* 鼠标悬停指针样式 */
}

.card:before {
    content: ''; /* 伪元素 */
    position: absolute;
    top: -30px; /* 调整位置 */
    left: -30px;
    width: 180px; /* 宽度比卡片正好多60px */
    height: 180px;
    background: #d5d5d5; /* 背景颜色 */
    border-radius: 50%; /* 圆形 */
    opacity: 0; /* 初始透明度为0 */
    transition: .2s ease; /* 过渡动画 */
    transform: scale(0); /* 初始缩放为0 */
}

.card:hover:before {
    opacity: .2; /* 透明度调整为0.2 */
    transform: scale(1); /* 缩放调整为1 */
}

通过以上CSS代码，我们可以实现一个圆形卡片的基本效果，含有过渡和动画效果。

示例

下面，我们给出一个完整的示例代码，可以直接在HTML页面中使用。

<div class="card">
  <img src="https://picsum.photos/id/1016/500/500.jpg" alt="">
</div>

.card {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  margin: 50px auto;
}

.card:before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  width: 240px;
  height: 240px;
  background: #d5d5d5;
  border-radius: 50%;
  opacity: 0;
  transition: .2s ease;
  transform: scale(0);
}

.card:hover:before {
  opacity: .2;
  transform: scale(1);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

总结

通过以上方法，我们可以很容易地实现圆形卡片效果，并可以根据需要进行样式的自定义和修改，达到自己所需的效果。