Html Css，圆圈动画如何让它们在悬停状态下生长并保持在同一直线上

我对下面的代码段有两个问题，我希望在悬停时所有的圆都保持在同一条线上，它们被“简单地”推到一边

但我在挣扎，只有当其中一个圆圈在缩放时，它们才似乎要到底部

然后，我试着让它们尽可能靠近，可能是因为它不是直线，但它们不会粘在一起。而文本移动得太远：O

我已经看到了缩放选项，但我无法在这里使用它。所以我只使用字体大小

我真的不擅长动画，如果有人能给我线索或帮助我，我将不胜感激

.bubble{
显示：内联块；
位置：相对位置；
右边距：-17px；
}
.泡泡{
字体大小：12px；
文本对齐：居中；
颜色：rgba（1001101150.6）；
}
.圆圈：之前{
内容：'\25CF'；
字号：80px；
过渡：字体0.5s轻松；
变换原点：0
}
.标签顶部{
位置：绝对位置；
顶部：10px；
左：0；
右：0；
}
.标签底部{
位置：绝对位置；
底部：3px；
左：0；
右：0；
}
蓝：之前{
颜色：#公元前306年；
}
天蓝色：以前{
颜色：#05CDF9；
}
黄色：之前{
颜色：#EEFB11；
}
红色：之前{
颜色：红色；
}
波尔多：以前{
颜色：#C90035；
}
紫色：之前{
颜色：#832A50；
}
布朗：以前{
颜色：#6C000C；
}
.圆圈：悬停：之前{
字体大小：200px；
}

诚实

信心

好奇
激情

判断
不同意

紧张

正如@CBroe所指出的，您正在使用字体字形作为圆圈。通过更改其字体大小，您正在更改行高，这将扰乱行中所有元素的垂直定位。诀窍是使用伪元素来创建圆，并绝对定位圆。完成此操作后，可以使用

transform:scale（…）

放大圆，而不会影响周围元素的布局

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

• 使用

  display:flex

  对齐气泡元素。您也可以在气泡元素上使用

  float:left

  ，但是flexbox现在得到了广泛的支持
• 不要设置变换原点，因为它默认为

  center

  无论如何：）

。气泡包装器{
显示器：flex；
}
.泡泡{
位置：相对位置；
宽度：40px；
高度：90px；
}
.泡泡{
字体大小：12px；
文本对齐：居中；
颜色：rgba（1001101150.6）；
}
.圆圈{
显示：块；
宽度：40px；
高度：40px；
}
.圆圈：之前{
显示：块；
宽度：40px；
高度：40px；
边界半径：50%；
内容：''；
过渡：所有0.5s缓解；
位置：绝对位置；
顶部：25px；
}
.标签顶部{
位置：绝对位置；
顶部：0px；
左：0；
右：0；
}
.标签底部{
位置：绝对位置；
底部：0；
左：0；
右：0；
}
蓝：之前{
背景色：#公元前306年；
}
天蓝色：以前{
背景色：#05CDF9；
}
黄色：之前{
背景色：#EEFB11；
}
红色：之前{
背景色：红色；
}
波尔多：以前{
背景色：#C90035；
}
紫色：之前{
背景色：#832A50；
}
布朗：以前{
背景色：#6C000C；
}
.圆圈：悬停：之前{
转换：比例（2.5）；
}

诚实

信心

好奇
激情

判断
不同意

紧张

我用@Terry的优秀答案作为我的基础

主要区别在于不需要伪元素。只需

transform:scale（）

（变换不会影响布局）悬停的元素，如果要将它们置于顶部，请将其设置为

z-index:1

。气泡包装器{
显示器：flex；
}
.泡泡{
位置：相对位置；
宽度：40px；
高度：90px；
}
.泡泡{
字体大小：12px；
文本对齐：居中；
颜色：rgba（1001101150.6）；
}
.圆圈{
显示：块；
位置：相对位置；
宽度：40倍；
高度：40px；
边界半径：50%；
内容：''；
过渡：所有0.5s缓解；
}
.标签顶部{
位置：绝对位置；
顶部：-40px；
左：0；
右：0；
}
.标签底部{
位置：绝对位置；
底部：0；
左：0；
右：0；
}
.圆圈.蓝色{
背景色：#公元前306年；
}
.circle.azure{
背景色：#05CDF9；
}
.黄色{
背景色：#EEFB11；
}
.圆圈，红色{
背景色：红色；
}
波尔多先生{
背景色：#C90035；
}
.圆圈.紫色{
背景色：#832A50；
}
布朗先生{
背景色：#6C000C；
}
.圆圈：悬停{
z指数：1；
转换：比例（2.5）；
}
身体{
填充：40px；
}

诚实

信心

好奇
激情

判断
不同意

紧张

字体大小的混乱是您在这里遇到的主要问题。。。因为这会改变这些元素所在的整个“线”的属性，因此只有自然的事物才会开始“跳跃”。你也许可以避免，如果你把圆定位成绝对的。。。但是用天平

.bubble {
    display: inline-block;
    position: relative;
    /* margin-right: -17px; */
    vertical-align: middle;
}

.circle:hover:before {
    /* font-size: 200px; */
    width: 100px;
    height: 100px;
}

.circle.blue:before {
    background: #306BCE;
    /* width: 50px; */
    /* height: 50px; */
    /* display: block; */
}

.circle:before {
    content: '';
    font-size: 80px;
    transition: font 0.5s ease;
    transform-origin: 0 0;
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50%;
    background: red;
}