需要帮助使文本内容的CSS过渡平滑

我在链接上有这种很酷的CSS过渡效果（称为"链接"），当您悬停在链接时，出现了两个附加的链接。最重要的是，"链接"一词本身会更改为" LinkedIn"。

问题是，两个额外链接的不透明度过渡非常流畅，并且"链接"到" 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中添加其他文本，并在Hove上显示不透明度

.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>

相关内容

最新更新

热门标签：