悬停缩写时的CSS转换

我正在尝试使用HTML和CSS，但无法弄清楚如何执行此操作。假设我有一个缩写“AW”，代表“Abcd-Wxyz”。我想要一个动画，从第一个字母开始滚动剩下的单词。悬停缩写时的CSS转换

我测试了位置，显示，可见性和转换，但没有一个可行。为了使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; 
     } 
    } 
}

来源

2016-09-28 phip1611

您需要使用关键帧：https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes –

你不能做到这一点，只有宽度属性，但可以使用最大宽度诱骗（0，然后在汽车，当你将鼠标悬停zk触发器）。
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; 
}

来源

2016-09-28 18:45:33 sodimel

非常感谢你，先生，这是一个天才的主意，用最大宽度而不是宽度:) – phip1611

没问题，祝你有个愉快的日子:) – sodimel

我有一个奇怪的错误。由于我使用溢出：隐藏我必须使用“vertical-align：middle”，否则布局会变得疯狂。只在Chrome中，而不在Firefox中。 – phip1611

悬停缩写时的CSS转换

回答

相关问题