代码之家 › 专栏 › 技术社区 › alonblack

如何获得圆形悬停效果

transition css html

alonblack · 技术社区 · 7 年前

我怎样才能实现如所附图片(右下图)中那样的圆形悬停效果

以下是相关css:

.box_details {
  float:left;
  width:200px;
  height:200px;
  margin-right:35px;
  background-color:#fff;

  border-radius:3px;
  box-shadow: 0px 6px 19px 16px rgba(239,242,245,1);
}

.box_details:hover {
background-color:#f4f6f8;
color:#939bc5;
}

1 回复 | 直到 7 年前

Maharkus zok 7 年前

可以制作一个宽度大于其父元素的圆,并将其居中。请查看代码段以获取这方面的演示。

.box_details {
  float: left;
  width: 200px;
  height: 200px;
  margin-right: 35px;
  background-color: #fff;
  display: block;
  position: relative;
  border-radius: 3px;
  box-shadow: 0px 6px 19px 16px rgba(239, 242, 245, 1);
  overflow: hidden;
}

.box_details:hover .circle {
  margin-top: 140px;
  transition-duration: 0.4s;
}

p {
  text-align: center;
}

.circle {
  position: absolute;
  width: 200%;
  height: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: lightgrey;
  border-radius: 50%;
  margin-left: -50%;
  margin-top: 250px;
  transition-duration: 0.4s;
}

<div class="box_details">
  <div class="circle">
    <p>Hi!</p>
  </div>
</div>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前