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

概述我在下面的代码片段中遇到了2个问题,我希望将所有圈子留在同一条线上时,它们“简单地”推到一边. 但是我正在努力,只有当其中一个圈子正在缩放时,它们似乎才会到底. 然后,我试图让它们尽可能接近,也许是因为它不是aline,但它们并没有在调整大小时粘在一起.文字移得太远了：O 我已经看过缩放选项,但我不能在这里工作.所以我只使用font-size. 我真的不喜欢动画,如果有人可以给我线索或帮助我,我将 我在下面的代码片段中遇到了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: ' CF';  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 >    <span ></span>    <p >Honesty</p>  </div>  <div >    <p >ConfIDence</p>    <span ></span>  </div>  <div >    <span ></span>    <p >Curiosity</p>  </div>  <div >    <p >Passion</p>    <span ></span>  </div>  <div >    <span ></span>    <p >Judging</p>  </div>  <div >    <p >disagree</p>    <span ></span>  </div>  <div >    <span ></span>    <p >Nervousness</p>  </div></div>

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

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

>使用display：flex来对齐气泡元素.您也可以在气泡元素上使用float：left,但今天FlexBox得到了广泛的支持.
>不要设置变换原点,因为它无论如何都默认为居中中心:)

.bubble-wrapper {  display: flex;}.bubble {  position: relative;  wIDth: 40px;  height: 90px;}.bubble p {  Font-size: 12px;  text-align: center;  color: rgba(100,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 >  <div >    <span ></span>    <p >Honesty</p>  </div>  <div >    <p >ConfIDence</p>    <span ></span>  </div>  <div >    <span ></span>    <p >Curiosity</p>  </div>  <div >    <p >Passion</p>    <span ></span>  </div>  <div >    <span ></span>    <p >Judging</p>  </div>  <div >    <p >disagree</p>    <span ></span>  </div>  <div >    <span ></span>    <p >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,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 >  <div >    <p >Honesty</p>  </div>  <div >    <p >ConfIDence</p>  </div>  <div >    <p >Curiosity</p>  </div>  <div >    <p >Passion</p>  </div>  <div >    <p >Judging</p>  </div>  <div >    <p >disagree</p>  </div>  <div >    <p >Nervousness</p>  </div></div>

总结

以上是内存溢出为你收集整理的html – Css,圈子动画如何让它们在悬停时保持增长并保持在同一条线上全部内容，希望文章能够帮你解决html – Css,圈子动画如何让它们在悬停时保持增长并保持在同一条线上所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。