代码之家 › 专栏 › 技术社区 › ygoe

隐藏CSS中的其他元素

css html

ygoe · 技术社区 · 8 年前

我想展示一个文本动画,其中第二个文本从底部移入,第一个文本从顶部移入。下面是基本的HTML结构:

<span style="position: relative; overflow: hidden; padding-right: 100px;">
    <span style="display: block; position: absolute; left: 0px; top: 0px;">Text1</span>
    <span style="display: block; position: absolute; left: 0px; top: 20px;">Text2</span>
</span>

为了简洁起见,动画和布局细节被省略了。

更新: 下面是一个完整的示例供您使用: http://jsfiddle.net/xpvt214o/577089/

我的主要问题是外部元素不应该是可见的,但它是可见的。这个 overflow 财产一点作用也没有。我该怎么解决?

外部 span 元素是 inline 因为它在其他文本中流动。只有句子的一部分可以换掉。动画文本必须与句子的其余部分正确对齐。 inline-block 因为外面的元素不会这么做。

剪辑也必须在内部元素的动画期间应用( transition: top 0.5s ).

我找到了CSS属性 clip 和 clip-path . 前者被弃用(而且也不起作用),而后者是实验性的,在所有必需的浏览器中都不受支持(在Firefox中也失败了)。

2 回复 | 直到 8 年前

Holzchopf 8 年前

必须使用内联块或块才能使剪辑工作。问题是:如果有一个blocky元素,它只包含绝对定位的子元素或是空的,那么它就没有任何维度了-您必须手动设置它。尝试:

<span style="display: inline-block; position: relative; overflow: hidden; padding-right: 100px; height: 1.2em; line-height: 1.2em; vertical-align: bottom;">
    <span style="display: block; position: absolute; left: 0px; top: 0px;">Text1</span>
    <span style="display: block; position: absolute; left: 0px; top: 20px;">Text2</span>
</span>

Abi Rana 8 年前

我不知道你为什么要使用内联CSS和跨度,但我想我已经为你找到了答案。请检查我的解决方案,如果你不清楚,请告诉我。

您可以只使用一个元素,使用伪元素,而不使用其他元素。而SPAN是一个内联元素,因此您可以将内联块分配给它。

当做, AB公司

.hover-text {
  display: inline-block;
  background-color: grey;
  color: transparent;
  color: white;
  padding: 10px 25px;
  position: relative;
  overflow: hidden;
}
.hover-text:before {
  content: 'Text 1';
  padding: inherit;
  position: absolute;
  left: 0;
  top: 0%;
  background-color: inherit;
  transition: 0.2s ease all;
}
.hover-text:after {
  content: 'Text 2';
  padding: inherit;
  position: absolute;
  left: 0;
  bottom: -100%;
  background-color: red;
  transition: 0.2s ease all;
}
.hover-text:hover:before {
  top: -100%;
}
.hover-text:hover:after {
  bottom: 0%;
}