Question

Hoi Hoi！

我想让文字从徽标后面滑出，我在浏览文本时遇到了一些麻烦。在这种情况下，我尝试过CSS方法。这个片段显示了我想要的动画类型，但是，我试图用文本替换白线，同时保持平滑过渡。

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以在伪元素的内容中添加文本，并将raw_data = { 'category': [np.nan, 'healthy,salty snacks'], 'product_name': ['coca-cola', 'salted pistachios']} df = pd.DataFrame(raw_data) df['my_col'] = df.category.str.split(',').str[-2:].str.join(',') print (df) category product_name my_col 0 NaN coca-cola NaN 1 healthy,salty snacks salted pistachios healthy,salty snacks df['my_col'] = df.category.apply(lambda s: ','.join(s.split(',')[-2:]))的动画从0设为大值。您还需要设置max-width以使文字保持一行，white-space:nowrap以避免溢出：

＆＃13;

overflow:hidden

＆＃13;

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
}

＆＃13;

Answer 2

我会创建一个关键帧（logoAnimation）来动画徽标的移动。我还会创建一个新的div并将其放在文本和徽标之间，阻挡器必须与背景颜色相同才能创建文本揭示的错觉，阻挡器也必须完全阻止文本在第一个。随着徽标移动，我还会调用另一个关键帧（logoBlockerAnimation），它以与徽标相同的速率变得越来越小

@keyframes logoAnimation{
    0%{
     //set the logo start y x position
    }

    100% {
    //set the logo start y x position
    }
}
@keyframes logoBlockerAnimation{
    0%{

     //set the width and x position of the text blocker
    }

    100% {
     //set the width and x position of the text blocker
    }
}

如何动画文本从图像滑出？

2 个答案: