Question

我试图在https://ollynural.github.io/上的社交媒体链接上创建转场，但我无法按预期工作。

当悬停在每个图标上时，我的目标是让hr栏平滑地将左右两侧转换到正确的点，同时使其变小。此时它将条的开始移动到较小部分的设定点，然后平滑地减小它。我不确定如何处理这个问题，我现在主要尝试使用css和转换。

我尽我所能做了一个JSFiddle here。

＆＃13;

.social-links {
  margin: 0 auto;
  width: 50%;
}
hr {
  width: 90%;
  border-top: 2px solid #8c8b8b;
  transition: width 0.5s ease;
}
@media (min-width: 768px) {
  .social-links {
    width: 30%;
  }
}
.social-links span {
  width: 100%;
  text-align: center;
  font-size: 1.8rem;
  margin-top: 15px;
}
@media (min-width: 420px) {
  .social-links span {
    font-size: 2rem;
    margin-top: 25px;
  }
}
.fa-github:hover {
  color: #64a4df;
}
.github-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 9%;
}
.fa-linkedin-square:hover {
  color: #64a4df;
}
.linkedin-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 34%;
}
.fa-twitter-square:hover {
  color: #64a4df;
}
.twitter-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 59%;
}
.fa-facebook-square:hover {
  color: #64a4df;
}
.facebook-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 84%;
}
.social-link {
  margin-bottom: 20px;
  padding-right: 0px;
  padding-left: 0px;
  height: 20px;
  width: 20px;
  background: red;
}

＆＃13;

<div class="social-bar">
  <div class="col-xs-12">
    <div class="social-links">

      <div class="col-xs-3 github-link social-link">
        <a href="https://github.com/OllyNural" target="github">
          <span class="fa fa-github"></span>
        </a>
      </div>
      <div class="col-xs-3 linkedin-link social-link">
        <a href="https://www.linkedin.com/in/oliver-nural-43565497" target="linkedin">
          <span class="fa fa-linkedin-square"></span>
        </a>
      </div>
      <div class="col-xs-3 twitter-link social-link">
        <a href="https://twitter.com/OliverNural" target="twitter">
          <span class="fa fa-twitter-square"></span>
        </a>
      </div>
      <div class="col-xs-3 facebook-link social-link">
        <a href="https://www.facebook.com/Olly.Nural" target="facebook">
          <span class="fa fa-facebook-square"></span>
        </a>
      </div>

      <hr class="social-line">
    </div>
  </div>
</div>

＆＃13;

谢谢，Olly

Answer 1

您在此处更改了两个属性width和margin-left。因此，您需要为width（正如您所做）和margin-left设置转换。为了使其顺利工作，您需要为`margin-left＆＃39;设置数字初始值。这对我有用：

hr {
  margin-left: 5%;
  width: 90%;
  border-top: 2px solid #8c8b8b;
  transition: width 0.5s ease, margin-left 0.5s ease;
}

CSS <hr />宽度转换

1 个答案: