CSS <hr> 寬度過渡

Question

我正在嘗試在https://ollynural.github.io/上的社交媒體鏈接上創建過渡，但是我無法使其按預期工作。

將鼠標懸停在每個圖標上時，我的目的是使hr欄左右兩側平滑過渡到正確的點，同時使其變小。 此刻，它將條形圖的起點移動到較小零件的設定點，然后平滑減小它。 我不太確定如何解決這個問題，我現在主要是在嘗試CSS和Transitions。

我已經盡力在這里做了一個JSFiddle。

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

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

謝謝，Olly

Answer 1

您將在此處更改兩個屬性， width和margin-left 。 因此，您需要既設置width過渡效果，又設置margin-left過渡效果。 為了使它順利運行，您需要為“ margin-left”設置一個數字初始值。 這為我工作：

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