用css制作信息泡沫

Question

我搜索了整个网络世界，但没有找到。我的问题是我们正在努力制造泡沫，他们必须看起来像这样

enter image description here

当我们点击任何人时，它必须显示有关某些数据的信息

enter image description here

你可以帮助我们吗？

Answer 1

首先：

使用border-radius制作气泡，点按即可展开尺寸。

添加一些JS逻辑，点击后会移动其他气泡。

* {
  box-sizing: border-box;
}

.frame {
  position: relative;
}

.bubble {
  position: absolute;
  display: inline-block;
  width: 130px;
  height: 130px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(50, 90, 140, .3);
  padding-top: 55px;
  transition: all 200ms ease-in-out;
  z-index: 6;
}

.bubble .content {
  display: none;
}

.bubble.active {
  width: 260px;
  height: 260px;
  z-index: 20;
}
.bubble.active .content {
  display: block;
  width: 130px;
  height: 130px;
  overflow: auto;
  display: inline-block;
}

#b1 {
  top: 50px;
  left: 60px;
}

#b2 {
  top: 168px;
  left: 68px;
  background-color: rgba(150, 40, 90, .3);
}

#b3 {
  top: 168px;
  left: 68px;
  background-color: rgba(60, 200, 90, .3);
}

#b3 {
  top: 80px;
  left: 150px;
  background-color: rgba(200, 200, 40, .3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame">
  <div class="bubble" id="b1" onClick="$(this).toggleClass('active')">
    <span class="header">Random text</span><br>
    <div class="content">
      random text random text random text random text random text <br>
      random text random text random text random text 
      <br>
      random text random text random text 
    </div>
  </div>
  
  <div class="bubble" id="b2" onClick="$(this).toggleClass('active')">
    <span class="header">Random text</span><br>
    <div class="content">
      random text random text random text random text random text <br>
      random text random text random text random text 
      <br>
      random text random text random text 
    </div>
  </div>
  
  <div class="bubble" id="b3" onClick="$(this).toggleClass('active')">
    <span class="header">Random text</span><br>
    <div class="content">
      random text random text random text random text random text <br>
      random text random text random text random text 
      <br>
      random text random text random text 
    </div>
  </div>
  
  <div class="bubble" id="b4" onClick="$(this).toggleClass('active')">
    <span class="header">Random text</span><br>
    <div class="content">
      random text random text random text random text random text <br>
      random text random text random text random text 
      <br>
      random text random text random text 
    </div>
  </div>
</div>