如何使用 CSS 绘制在 Bootstrap 轮播指示器中移动的内圆？

Question

如何使用CSS绘制在Bootstrap轮播指示器中移动的内圆？

看起来如下：

悬停需要如下：

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

<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>

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

如何使用 CSS 绘制在 Bootstrap 轮播指示器中移动的内圆？

How to draw inner circle that moves in Bootstrap Carousel's indicator using CSS?

css

indicator

bootstrap-4