悬停时的圆形图像占据高度和宽度的100％

Question

嗨，我正在尝试在悬停时制作动画，如果没有悬停，我希望我的圆成为高度和宽度的100％

由于某种原因，我无法以100％的边界半径离开我的圆

像这样：

代码：

export const TeamCard = styled.div`
  background: red;
  padding: 10px 0;
  & .bgCircle {
    border-radius: 50%;
    padding: 64px;
    background: hotpink;
  }
`;
export default function App() {
  return (
    <TeamCard>
      <div className="bgCircle" />
      <div class="description">
        <h3>huhuehu</h3>
        <h3>testing</h3>
      </div>
    </TeamCard>

示例：

https://codesandbox.io/s/dry-river-09ft0

Answer 1

尝试使用以下styled-div：

export const TeamCard = styled.div`
  position: relative;
  background: red;
  height: 300px;
  width: 300px;
  & .bgCircle {
    border-radius: 100%;
    height: 50px;
    width: 50px;
    background: hotpink;
    transition: all ease 333ms;
  }
  &:hover {
    .bgCircle {
      position: absolute;
      top: 0;
      height: 300px;
      width: 300px;
      border-radius: 0;
      left: 0;
      right: 0;
    }
  }
  & .description {
    position: absolute;
    bottom: 0;
  }
`;

这是利用绝对定位来正确设置圆的位置。为了使绝对定位有效，包含元素需要具有“静态”以外的其他位置。

过渡属性是提供动画的元素。