CSS悬停圆角div填充

Question

我试着在悬停在一个圆形 div 上时做一个小特效，但我找不到如何使填充内容也呈现圆形的方法。

从图片上可以看出，填充内容是方形的，而我希望它能够呈现我的 div 形状（本例中为圆形）。 在 CSS 中有解决方案吗？

.circle {
  height: 50px;
  width: 50px;
  margin: 35px;
  border: 3px solid blue;
  background-image: linear-gradient(blue, blue);
  background-repeat: no-repeat;
  transition: background-size .5s, color .5s;
  background-size: 0 0;
  background-position: 50% 50%;
  border-radius: 30px;
}

.circle:hover {
  background-size: 100% 100%;
  color: blue;
}

<div class="circle"></div>

- chicken burger

---

https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/ - Nimish

谢谢你提供的链接 @Nimish - chicken burger

Answer 1

您可以使用radial-gradient或box-shadow

• box-shadow

.circle {
  height: 50px;
  width: 50px;
  margin: 35px;
  border: 3px solid blue;
  background: blue;
  transition: box-shadow .5s, color .5s;
  background-size: 0 0;
  background-position: 50% 50%;
  border-radius: 30px;
  box-shadow: inset 0 0 0 50px white
}

.circle:hover {
  box-shadow: inset 0 0 0 0px white;
  color: blue;
}

<div class="circle">
</div>

• 径向渐变

.circle {
        height: 50px;
        width: 50px;
        margin: 35px;
        border: 3px solid blue;
        background-image: radial-gradient(circle at center , blue 50%, transparent 50%);
        background-repeat: no-repeat;
        transition: background-size .5s, color .5s;
        background-size: 0 0;
        background-position: 50% 50%;
        border-radius: 30px;

    }

.circle:hover {
    background-size: 200% 200%;
    color: blue;
}

<div class="circle">
</div>

- G-Cyrillus

---

谢谢你的示例。第一个不实用，因为我需要圆形内部为空，而不是填充白色，所以我无法应用它。另外，为什么您要将背景大小设置为200％，并且有两次“background-image”？ - chicken burger

@crisscross，径向渐变只覆盖了背景的50%（请查看规则：blue 50%，transparent 50%，您可以调整这些值）。否则，请将bg-size设置为100％并查看发生了什么;) - G-Cyrillus

Answer 2

你可以使用伪元素填充圆形并设置动画。

.circle {
  height: 50px;
  width: 50px;
  border: 3px solid blue;
  border-radius: 50%;
  margin: 35px;
  position: relative;
}

.circle:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  background: blue;
  border-radius: 50%;
  width: 0;
  height: 0;
  transition: all .5s;
}

.circle:hover:before {
  width: 100%;
  height: 100%;
}

<div class="circle"></div>

- Stickers

---

嗨，感谢你的回答。但是绝对定位和相对定位会搞乱同一容器中的其他divs。不错的建议。 - chicken burger

如果您能创建一个 jsfiddle 演示来展示它，那么代码很可能可以进行微调。 - Stickers