Question

我正在尝试使用HTML和CSS，但却无法弄清楚如何做到这一点。假设我有一个缩写“AW”代表“Abcd-Wxyz”。我想要一个动画，从第一个字母开始滚动剩下的单词。

我测试了位置，显示，可见性和转换，但它们都不起作用。为了使CSS过渡工作，我需要调整容器的宽度。任何想法如何正确地做到这一点？

<header><h1>Some Heading - <span id="zk-trigger">A<span id="hide1" class="hide">bcd-</span>W<span id="hide2"  class="hide">xyz</span></span> | Anything Else</h1></header>

我用这样的东西测试过。它工作但没有任何动画..：/

header {
    height: $generalHeight;
    box-shadow: 2px 2px 2px #ccc;

    h1, span {
        font-size: 35px;
        line-height: $generalHeight;
        width: 960px;
        margin: 0 auto;
        font-weight: 400;
        letter-spacing: 2px;


    }
    span {
        color: #ff900f;
    }
    span#zk-trigger {
        span.hide {
            position: absolute;
            width: 0px;
            overflow: hidden;
            visibility: hidden;
        }
    }
    span#zk-trigger:hover {
        span.hide {
            visibility: visible;
            position: static;
        }
    }
}

Answer 1

你不能只使用width属性，但你可以使用max-width（0时，然后悬停zk-trigger时自动）来欺骗它。
Here's an exemple

#hide1, #hide2{
// the base display, using the max-width trick
  display: inline-block;
  max-width: 0;
  owerflow: hidden;
  opacity: 0;
  transition: max-width 0.2s, opacity 0.2s;
}

#zk-trigger:hover #hide1, #zk-trigger:hover #hide2{
// apply the code to #hide1 and #hide2 when #zk-trigger is hovered
  max-width: 100px;
  opacity: 1;
  transition: max-width 0.2s, opacity 0.2s;
}

CSS悬停缩写时的转换

1 个答案: