css - 如何使用 CSS 绘制在 Bootstrap Carousel 指示器中移动的内圈？

Question

如何使用 CSS 绘制在 Bootstrap Carousel 指示器中移动的内圈？

它看起来如下：

悬停需要如下：

到目前为止，我编写的代码如下所示：

<style lang="sass">
.carousel-indicators li
  background-color: transparent
  border: 0
  border-radius: 100%
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, 1)
  height: 22px
  margin-left: 15px
  margin-right: 15px
  width: 22px
.carousel-indicators li:hover
  background-color: #fff
  border: 0
  border-radius: 100%
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, 1)
  height: 22px
  margin-left: 15px
  margin-right: 15px
  width: 22px
</style>

标签： cssbootstrap-4indicator

Answer 1

用于pseudo-elements这样做。

首先定位li，它也作为非活动状态：

.carousel-indicators li {
  border-radius: 50%;
  width: 6px;
  height: 6px;
  padding: 4px;
  position: relative;
  margin: 0 15px;
  background-color: transparent;
  opacity: 1;
}

现在创建border使用pseudo-elements：

.carousel-indicators li:after {
  border-radius: 50%;
  padding: 10px;
  border: 4px solid #fff;
  position: absolute;
  content: "";
  top: -7px;
  left: -7px;
  bottom: -7px;
  right: -7px;
}

我们已经为 分配transparent了背景，li但是我们想要状态white中的背景，active所以，

.carousel-indicators li.active {
  background-color: white;
}

代码笔： https ://codepen.io/manaskhandelwal1/pen/abmRbZv