css scale3d translate3d 工具提示效果

Question

我正在尝试制作工具提示效果，如下 link 所示：http://tympanus.net/Development/TooltipStylesInspiration/line.html

我在 JSfiddle 上有以下源代码：http://jsfiddle.net/0b5gpLko/

由于我没有完全按照教程逐字逐句地学习，所以我想知道是否有办法隐藏元素 .inner，直到它超过白色条 .text{ border-bottom }。

谢谢

Answer 1

只需将 overflow: hidden; 添加到 .text，就像这样

.text {
    width: 280px;
    display: block;
    border-bottom: 10px solid #ffffff;
    transition: transform .3s .2s;
    transform: scale3d(0,1,1);
    text-align: center;
    overflow: hidden;
}

Fiddle

css scale3d translate3d 工具提示效果

css scale3d translate3d for tooltip effect

css

3d

scale

transition

translate