html - 如何制作动画文本以从图像中滑出？

Question

我想让文本从 Logo 后面滑出，但我在让文本顺利滑出时遇到了一些问题。在这种情况下，我尝试了一种 CSS 方法。这段代码显示了我想要什么样的动画，但是，我试图用 text 替换 white line，同时保持平滑的过渡。

html, body {
  margin:0;
  padding:0;
  background-color:#444
}

/*////////////////////////////////////////////////////*/

header {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center
}
header .logoWrap {
  padding-top:15px;
  width: 40%;
  display:flex;
  justify-content:center;
  align-items:center
}
header .logoWrap:after {
  content: '';
  flex-grow:0;
  height: 1px;
  background-color: #fff;
  transition: flex-grow .6s cubic-bezier(.4,0,.2,1);
  margin: 0 .5rem;
}
header .logoWrap:hover:after {
  flex-grow: 1;
}
header .logo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .logo img {
  width:70px
}

<header>
  <div class="logoWrap">
    <div class="logo">
      <img src="http://1000logos.net/wp-content/uploads/2017/05/Pepsi-Logo.png" alt="random logo :D"/>
    </div>
  </div>
</header>

Answer 1

您可以在伪元素的内容中添加文本，并将 max-width 从 0 设置为一个大值。您还需要设置 white-space:nowrap 以使文本保持一行，并设置 overflow:hidden 以避免溢出:

html, body {
  margin:0;
  padding:0;
  background-color:#444
}

/*////////////////////////////////////////////////////*/

header {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center
}
header .logoWrap {
  padding-top:15px;
  width: 40%;
  display:flex;
  justify-content:center;
  align-items:center
}
header .logoWrap:after {
  content: 'Some text to animate';
  white-space:nowrap;
  overflow:hidden;
  flex-grow:0;
  max-width:0px;
  background-color: #fff;
  transition: .6s cubic-bezier(.4,0,.2,1);
  margin: 0 .5rem;
}
header .logoWrap:hover:after {
  max-width:250px;
}
header .logo {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
header .logo img {
  width:70px
}

<header>
  <div class="logoWrap">
    <div class="logo">
      <img src="https://lorempixel.com/50/50/" alt="random logo">
    </div>
  </div>
</header>