我似乎无法理解这一点,但我相信这很简单..
基本上我有一些这样的文字:DJDM,这是我的首字母。我正在尝试做的是,当您将鼠标悬停在其中一个字母上时,使用 CSS3 转换将全名显示在它旁边。因此,如果您将鼠标悬停在 D 上,您将获得 DanielJDM。
我希望过渡缓慢地移动其余字母,并让单词的其余部分增加不透明度,直到完全可见。
我敢肯定有办法做到这一点我只是现在无法弄清楚..
我会很感激帮助!谢谢。
我似乎无法理解这一点,但我相信这很简单..
基本上我有一些这样的文字:DJDM,这是我的首字母。我正在尝试做的是,当您将鼠标悬停在其中一个字母上时,使用 CSS3 转换将全名显示在它旁边。因此,如果您将鼠标悬停在 D 上,您将获得 DanielJDM。
我希望过渡缓慢地移动其余字母,并让单词的其余部分增加不透明度,直到完全可见。
我敢肯定有办法做到这一点我只是现在无法弄清楚..
我会很感激帮助!谢谢。
这是一个远非完美的解决方案(它有很多闪烁),但应该让您开始走上正确的道路:
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;
}
这是另一个例子。我没有使用 span 元素,所以 html 更少。除了获得所需功能的最低限度之外,也没有任何 css 样式。
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);
}