重叠的圆圈答案

【问题标题】：Overlapping Circles重叠的圆圈
【发布时间】：2021-03-21 19:24:06
【问题描述】：

我需要您的帮助来重叠圆圈，使其类似于以下链接的流程部分中所示的重叠圆圈示例：

.dot {
  height: 200px;
  width: 200px;
  position: relative;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: whitesmoke;
  background-color: rgba(0, 0, 0, 0);

  display: inline-block;
  margin-top: 9%;
}

<div ID="process" class="process">
     
      <div style="circleProcess">
       
        <span ID="cricle1" class="dot"></span>
        <span ID="cricle2"class="dot"></span>
        <span ID="cricle3"class="dot"></span>
        <span ID="cricle4"class="dot"></span>
      </div>

【问题讨论】：

标签： html css styles overlapping

【解决方案1】：

在.dot类margin:9% -15px 0中添加负值，并在div的悬停上添加css transform:scale(1.05)以获得悬停效果

.process {
  padding: 0 25px;
}
.dot {
  height: 200px;
  width: 200px;
  margin: 9% -15px 0;
  position: relative;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: whitesmoke;
  background-color: rgba(0, 0, 0, 0);
  display: inline-block;
  transition: all .3s;
}
.dot:hover {
  transform: scale(1.05);
}

<div ID="process" class="process">
  <div style="circleProcess">
    <span ID="cricle1" class="dot"></span>
    <span ID="cricle2"class="dot"></span>
    <span ID="cricle3"class="dot"></span>
    <span ID="cricle4"class="dot"></span>
  </div>
</div>

【讨论】：

谢谢:) 你帮助了我

【解决方案2】：

在.dot上添加边距margin: 9% -15px 0;

.process{
  padding:0 15px;
}
.dot {
  height: 200px;
  width: 200px;
  position: relative;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: whitesmoke;
  background-color: rgba(0, 0, 0, 0);

  display: inline-block;
  margin: 9% -15px 0;
}

<div ID="process" class="process">
     
      <div style="circleProcess">
       
        <span ID="cricle1" class="dot"></span>
        <span ID="cricle2"class="dot"></span>
        <span ID="cricle3"class="dot"></span>
        <span ID="cricle4"class="dot"></span>
      </div>

【讨论】：