我在一个链接(称为“链接”)上获得了这种很酷的 CSS 过渡效果，当您将鼠标悬停在它上面时，会出现两个额外的链接。最重要的是，“Links”这个词本身变成了“LinkedIn”。
问题是，两个额外链接的不透明度过渡非常平滑，而“Links”到“LinkedIn”的文本过渡不是。它会立即切换到悬停状态。
有没有办法让它更顺畅地匹配其他链接？以某种方式从指向 LinkedIn 的链接中消失？
谢谢!
.links {
display: flex;
flex-direction: column;
margin-left: 5%;
color: white;
font-family: 'heebo';
font-size: 30px;
text-align: center;
width: 140px;
}
.links ul {
width: 100%;
display: flex;
flex-direction: column;
}
.linksG {
color: #F28500;
text-decoration: none;
opacity: 0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
.linksL:before {
color: white;
text-decoration: none;
content: 'Links';
transition: content 1s;
-moz-transition: content 1s;
-webkit-transition: content 1s;
}
.linksS {
color: #D95D39;
text-decoration: none;
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.links:hover .linksG {
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
.links:hover .linksS {
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.links:hover .linksL:before {
content: 'LinkedIn';
text-decoration: none;
transition: content .55s;
-moz-transition: content .55s;
-webkit-transition: content .55s;
}<body style="background-color: black;">
<div class="links">
<ul>
<li>
<a class="linksG" href="http://github.com">Github</a>
</li>
<li>
<a class="linksL" style="text-decoration: none;" href="http://linkedin.com/"></a>
</li>
<li>
<a class="linksS" href="http://stackoverflow.com">S/Overflow</a>
</li>
</ul>
</div>
</body>最佳答案
当你改变文本时，你不能使用 css transition，但你可以在 :before 中添加其他文本，并以不透明度显示它
.links {
display: flex;
flex-direction: column;
margin-left: 5%;
color: white;
font-family: 'heebo';
font-size: 30px;
text-align: center;
width: 140px;
}
.links ul {
width: 100%;
display: flex;
flex-direction: column;
}
.linksG {
color: #F28500;
text-decoration: none;
opacity: 0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
.contentClass{
position:relative;
}
.linksL:before {
position:absolute;
left:0;
color: white;
text-decoration: none;
content: 'Links';
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
}
.linksL:after {
position:absolute;
left:0;
color: white;
opacity:0;
text-decoration: none;
content: 'Linkedin';
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
}
.linksS {
color: #D95D39;
text-decoration: none;
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.links:hover .linksG {
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
.links:hover .linksS {
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.links:hover .linksL:before {
opacity:0;
text-decoration: none;
transition: opacity .55s;
-moz-transition: opacity .55s;
-webkit-transition: opacity .55s;
}
.links:hover .linksL:after {
opacity:1;
text-decoration: none;
transition: opacity .55s;
-moz-transition: opacity .55s;
-webkit-transition: opacity .55s;
}<body style="background-color: black;">
<div class="links">
<ul>
<li>
<a class="linksG" href="http://github.com">Github</a>
</li>
<li class="contentClass">
<a class="linksL" style="text-decoration: none;" href="http://linkedin.com/"></a>
</li>
<li>
<a class="linksS" href="http://stackoverflow.com">S/Overflow</a>
</li>
</ul>
</div>
</body>关于html - 需要帮助获得文本内容的平滑 CSS 过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38068952/