CSS <hr>寬度轉換

Question

我試圖在https://ollynural.github.io/上創建社交媒體鏈接上的轉換，但我無法按預期工作。

當我們將鼠標懸停在每個圖標上時，我的目標是讓hr bar平滑地將左右兩側轉換到正確的點，同時使它更小。此時它將條的開始移動到較小部分的設定點，然後平滑地減小它。我不確定如何解決這個問題，我現在主要嘗試使用css和transitions。

我做了一個JSFiddle here盡我所能。

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

感謝，奧利

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