CSS3 过渡帮助答案

【问题标题】：CSS3 Transitions HelpCSS3 过渡帮助
【发布时间】：2011-09-08 19:35:06
【问题描述】：

我似乎无法理解这一点，但我相信这很简单..

基本上我有一些这样的文字：DJDM，这是我的首字母缩写。我正在尝试做的是，当您将鼠标悬停在其中一个字母上时，使用 CSS3 过渡将全名显示在它旁边。因此，如果您将鼠标悬停在 D 上，您将获得 DanielJDM。

我希望过渡缓慢地移动其余字母，并让单词的其余部分增加不透明度，直到完全可见。

我确定有办法做到这一点，但我现在想不通..

非常感谢您的帮助！谢谢。

【问题讨论】：

到目前为止你有什么？您可以在这里向我们展示：jsfiddle.net

标签： css transitions

【解决方案1】：

这是另一个例子。我没有使用 span 元素，所以 html 更少。除了获得所需功能的最低限度之外，也没有任何 css 样式。

http://jsfiddle.net/bGYkB/

html：

<div class="name-container">
    <p>Daniel</p>
    <p>Jiminy</p>
    <p>Daniel</p>
    <p>McLastname</p>
</div>

CSS

.name-container{
    display:block;
    float:left;
}

.name-container p{
    display:block;
    float:left;
    overflow:hidden;
    color:rgba(0,0,0,0);
    width:15px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

.name-container p:first-letter{
    color:rgba(0,0,0,1);
}

.name-container p:hover{
    width:80px;
    color:rgba(0,0,0,1);
}

【讨论】：

这是 :first-letter 的绝妙用法！我从来没有想到这一点！感谢您的精彩回复。

【解决方案2】：

这是一个远完美的解决方案（它有很多闪烁），但应该让您开始走上正轨：

HTML：

<span class="parent"><span class="initial">D</span><span class="full">aniel</span></span>
<span class="parent"><span class="initial">J</span><span class="full">ohn</span></span>
<span class="parent"><span class="initial">D</span><span class="full">avid</span></span>
<span class="parent"><span class="initial">M</span><span class="full">aniel</span></span>

CSS：

body {
    font-size: 30px;
}
span.parent {
    padding: 0 5px;
}
span.full {
    opacity: 0;
    width: 0;
    display: inline-block;
    transition: opacity 0.5s;
    transition: width 0.2s;
}
span:hover span.full {
    opacity: 1;
    width: 50px;
}

http://jsfiddle.net/HjCen/

【讨论】：