1
我在鏈接上有這個很酷的CSS過渡效果(稱爲「鏈接」),當您將鼠標懸停在其上時會出現兩個附加鏈接。最重要的是,「鏈接」一詞本身更改爲「LinkedIn」。需要幫助讓文本內容變得流暢的CSS過渡
問題是,兩個額外鏈接的不透明度轉換非常流暢,「鏈接」到「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>