Css,圈动动画如何让它们在悬停时生长并保持在同一条线上

Question

我在下面的代码片段中遇到了2个问题,我希望在悬停所有圆圈时保持在同一条线上,它们"简单地"推到一边.

但是我正在努力,只有当其中一个圈子正在缩放时,它们似乎才会到底.

然后,我试图让它们尽可能接近,也许是因为它不是aline,但它们并没有在调整大小时粘在一起.文字移得太远了:O

我已经看过缩放选项,但我不能在这里工作.所以我只使用font-size.

我真的不喜欢动画,如果有人可以给我线索或帮助我,我将不胜感激!

.bubble {
  display: inline-block;
  position: relative;
  margin-right: -17px;
}

.bubble p {
  font-size: 12px;
  text-align: center;
  color: rgba(100, 110, 115, 0.6);
}

.circle:before {
  content: ' \25CF';
  font-size: 80px;
  transition: font 0.5s ease;
  transform-origin: 0 0
}

.label-top {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
}

.label-bottom {
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
}

.circle.blue:before {
  color: #306BCE;
}
.circle.azure:before {
  color: #05CDF9;
}
.circle.yellow:before {
  color: #EEFB11;
}
.circle.red:before {
  color: red;
}
.circle.bordeau:before {
  color: #C90035;
}
.circle.purple:before {
  color: #832A50;
}
.circle.brown:before {
  color: #6C000C;
}

.circle:hover:before {
  font-size: 200px;
}

<div>
  <div class="bubble">
    <span class="circle blue"></span>
    <p class="label-bottom">Honesty</p>
  </div>
  <div class="bubble">
    <p class="label-top">Confidence</p>
    <span class="circle azure"></span>
  </div>
  <div class="bubble">
    <span class="circle yellow"></span>
    <p class="label-bottom">Curiosity</p>
  </div>
  <div class="bubble">
    <p class="label-top">Passion</p>
    <span class="circle red"></span>
  </div>
  <div class="bubble">
    <span class="circle bordeau"></span>
    <p class="label-bottom">Judging</p>
  </div>
  <div class="bubble">
    <p class="label-top">Disagree</p>
    <span class="circle purple"></span>
  </div>
  <div class="bubble">
    <span class="circle brown"></span>
    <p class="label-bottom">Nervousness</p>
  </div>
</div>

Answer 1

正如@CBroe指出的那样,你使用字体字形作为圆圈.通过更改其字体大小,您将更改行高,这将弄乱行中所有元素的垂直位置.诀窍是使用伪元素来创建圆圈,并绝对定位圆圈.完成后,您可以使用transform: scale(...)放大圆圈,而不会影响周围元素的布局.

我还对您的代码进行了一些更改:

• 使用display: flex对准你的泡沫因素.您也可以float: left在气泡元素上使用,但今天Flexbox得到了广泛的支持.
• 不要设置变换原点,因为它center center无论如何都默认为:)

.bubble-wrapper {
  display: flex;
}
.bubble {
  position: relative;
  width: 40px;
  height: 90px;
}

.bubble p {
  font-size: 12px;
  text-align: center;
  color: rgba(100, 110, 115, 0.6);
}

.circle {
  display: block;
  width: 40px;
  height: 40px;
}

.circle:before {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  content: ' ';
  transition: all 0.5s ease;
  position: absolute;
  top: 25px;
}

.label-top {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
}

.label-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.circle.blue:before {
  background-color: #306BCE;
}

.circle.azure:before {
  background-color: #05CDF9;
}

.circle.yellow:before {
  background-color: #EEFB11;
}

.circle.red:before {
  background-color: red;
}

.circle.bordeau:before {
  background-color: #C90035;
}

.circle.purple:before {
  background-color: #832A50;
}

.circle.brown:before {
  background-color: #6C000C;
}

.circle:hover:before {
  transform: scale(2.5);
}

<div class="bubble-wrapper">
  <div class="bubble">
    <span class="circle blue"></span>
    <p class="label-bottom">Honesty</p>
  </div>
  <div class="bubble">
    <p class="label-top">Confidence</p>
    <span class="circle azure"></span>
  </div>
  <div class="bubble">
    <span class="circle yellow"></span>
    <p class="label-bottom">Curiosity</p>
  </div>
  <div class="bubble">
    <p class="label-top">Passion</p>
    <span class="circle red"></span>
  </div>
  <div class="bubble">
    <span class="circle bordeau"></span>
    <p class="label-bottom">Judging</p>
  </div>
  <div class="bubble">
    <p class="label-top">Disagree</p>
    <span class="circle purple"></span>
  </div>
  <div class="bubble">
    <span class="circle brown"></span>
    <p class="label-bottom">Nervousness</p>
  </div>
</div>

更新:如果您希望在悬停时扩展元素的宽度,那也是可能的.但是,我还建议您可以简化标记:基本上我们可以在没有圆形div的情况下完成:

.bubble-wrapper {
  display: flex;
}
.bubble {
  position: relative;
  width: 40px;
  height: 90px;
  transition: all 0.5s ease;
}

.bubble p {
  font-size: 12px;
  text-align: center;
  color: rgba(100, 110, 115, 0.6);
}

.bubble:before {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  content: ' ';
  transition: all 0.5s ease;
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
}

.label-top {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
}

.label-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.bubble.blue:before {
  background-color: #306BCE;
}

.bubble.azure:before {
  background-color: #05CDF9;
}

.bubble.yellow:before {
  background-color: #EEFB11;
}

.bubble.red:before {
  background-color: red;
}

.bubble.bordeau:before {
  background-color: #C90035;
}

.bubble.purple:before {
  background-color: #832A50;
}

.bubble.brown:before {
  background-color: #6C000C;
}

.bubble:hover {
  width: calc(40px * 2.5);
}
.bubble:hover:before {
  transform: translateX(-50%) scale(2.5);
}

<div class="bubble-wrapper">
  <div class="bubble blue">
    <p class="label-bottom">Honesty</p>
  </div>
  <div class="bubble azure">
    <p class="label-top">Confidence</p>
  </div>
  <div class="bubble yellow">
    <p class="label-bottom">Curiosity</p>
  </div>
  <div class="bubble red">
    <p class="label-top">Passion</p>
  </div>
  <div class="bubble bordeau">
    <p class="label-bottom">Judging</p>
  </div>
  <div class="bubble purple">
    <p class="label-top">Disagree</p>
  </div>
  <div class="bubble brown">
    <p class="label-bottom">Nervousness</p>
  </div>
</div>