Question

我需要知道如何使文本随着div float_mask的增长而出现。现在，当增加div时，文本将在转换结束时放在两行中，因为div如果已经保持原样，则已经达到100％。

.floating {

  display: flex;
  align-items: center;
  padding: 4px;
  justify-content: flex-start;
  }

  .container {
    z-index: 1;
    margin-left: 60px;
    margin-right: 20px;
  }

  .mask {
    overflow: hidden;
    position: relative;
    border: 1px solid lightgrey;
    height: 54px;
    width: 54px;
    transition: width 1s;
    display: flex;
    align-items: center;
    transform: translateX(2px);
  }
  
   .button:hover + .mask{
      width: 200px;
   }

  .button {
    position: absolute;
    border: 1px solid lightgrey;
    border-radius: 50%;
    background-color: white;
    padding: 12px;
    z-index: 2;
    top:17px;
    left:17px;
  }


}

<div class="floating">
    <button type="button"  class="button ">
       Icon
    </button>
    <div class="mask">
        <div class="container">
            <p style="margin: 0;font-size:14px">Message group</p>
             <p style="margin: 0;font-size:14px">Message group</p>
        </div>
    </div>
</div>

Answer 1

简便的方法是在单词之间使用 。

.floating {

  display: flex;
  align-items: center;
  padding: 4px;
  justify-content: flex-start;
  }

  .container {
    z-index: 1;
    margin-left: 60px;
    margin-right: 20px;
  }

  .mask {
    overflow: hidden;
    position: relative;
    border: 1px solid lightgrey;
    height: 54px;
    width: 54px;
    transition: width 1s;
    display: flex;
    align-items: center;
    transform: translateX(2px);
  }
  
   .button:hover + .mask{
      width: 200px;
   }

  .button {
    position: absolute;
    border: 1px solid lightgrey;
    border-radius: 50%;
    background-color: white;
    padding: 12px;
    z-index: 2;
    top:17px;
    left:17px;
  }


}

<div class="floating">
    <button type="button"  class="button ">
       Icon
    </button>
    <div class="mask">
        <div class="container">
            <p style="margin: 0;font-size:14px">Message&nbsp;group</p>
             <p style="margin: 0;font-size:14px">Message&nbsp;group</p>
        </div>
    </div>
</div>

Answer 2

试试这个CSS：

.container {
    z-index: 1;
    margin-left: 60px;
    margin-right: 20px;
    position: absolute;
    white-space: nowrap;
    animation: floatText 5s infinite alternate ease-in-out;
  }

这里是小提琴：https://jsfiddle.net/15n3quaL/

从左到右淡入文本，反之亦然

2 个答案: