CSS div 圆点步骤样式

在本文中，我们将介绍使用CSS div来制作圆点步骤样式的方法。

阅读更多：CSS 教程

使用无序列表和伪元素

使用无序列表和伪元素是一种最简单的方法来创建圆点步骤样式。首先，我们需要创建一个无序列表，并将其样式设置为列表项之间没有间隔和默认的样式：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

接下来，我们需要添加一个伪元素作为每个列表项的小圆点。我们使用CSS的 ::before 伪元素来创建小圆点，并将其样式设置为圆形、填充、水平和垂直居中和透明度为0.5：

li::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333;
  margin-right: 10px;
  position: relative;
  top: 2px;
  opacity: 0.5;
}

最后，我们需要将每个列表项的样式设置为内边距和字体样式：

li {
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.6;
}

这样，我们就可以创建一个简单的圆点步骤样式，如下所示：

<ul>
  <li>步骤一</li>
  <li>步骤二</li>
  <li>步骤三</li>
</ul>

使用CSS3样式

CSS3提供了更多有趣的样式，可用于创建各种类型的步骤样式。这里我们将介绍使用CSS3的阴影、渐变和动画样式来创建一个圆形步骤样式。

首先，我们需要设置一个容器，并将其样式设置为相对定位和宽度：

.container {
  position: relative;
  width: 100%;
}

接下来，我们需要为每个步骤创建一个圆形，并添加一个阴影。我们还需要将每个步骤设置为绝对定位，并根据容器的宽度将其均匀分布：

.step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #333;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.step:first-child {
  left: 0;
}

.step:last-child {
  right: 0;
}

.step:nth-child(2) {
  left: 33.3%;
}

.step:nth-child(3) {
  left: 66.6%;
}

现在我们有了每个步骤的圆形，但它们之间还没有连接。我们将使用CSS3的渐变样式来实现这一点。我们首先需要创建一个线性渐变，其颜色与背景颜色相同，并将其角度设置为0：

.gradient {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background-image: linear-gradient(0deg, #fff, #fff);
}

我们还需要将每个渐变连接到下一个步骤的圆形。我们将使用相同的选择器，但根据相邻的步骤中的位置将其 margin-left 设置为步骤圆形的一半，以使其与下一个圆形对齐：

.gradient:first-child {
  left: 0;
  margin-left: 7px;
}

.gradient:last-child {
  right: 0;
  margin-right: 7px;
}

.gradient:nth-child(2) {
  left: 33.3%;
  margin-left: 7px;
}

.gradient:nth-child(3) {
  left: 66.6%;
  margin-left: 7px;
}

现在，我们的每个步骤都连接起来了，但它们之间仍然没有什么动画效果。我们将使用CSS3的动画样式来创建一个简单的过渡效果。我们将首先为每个步骤添加一个类，以便在动画时进行选择。我们将使用transform: scale() 和 opacity 属性对步骤进行动画：

.step.active {
  transform: scale(1.3);
  opacity: 1;
}

接下来，我们将使用JavaScript在每个步骤之间进行循环，并添加 .active 类，以使当前步骤更明显：

const steps = document.querySelectorAll(".step");

steps.forEach((step, index) => {
  setTimeout(() => {
    step.classList.add("active");
  }, 150 * index);
});

这样，我们就可以创建一个有趣的、交互式的圆点步骤样式，如下所示：

<div class="container">
  <div class="step"></div>
  <div class="gradient"></div>
  <div class="step"></div>
  <div class="gradient"></div>
  <div class="step"></div>
</div>