CSS Geçişi ile kenar boşluklarını ve dolgulamayı canlandırma,

Question

personal website numaralı telefonumda, üst kenardaki CSS3 Geçiş özelliğini kullanarak kenarlıklı bir öğenin kenar boşluklarını ve dolgularını canlandırarak kenarlığı kabarık hale getiriyor.

İlgili işaretleme:

<nav> 
     <a class="email" href="mailto:notmyrealemailaddress"> 
      <div class="icon-border"> 
      <img src="images/mail_icon.png" width="14" height="12"> 
      </div>Email Me</a> 

     <a class="phone" href="tel:4075555555"> 
      <div class="icon-border"> 
      <img src="images/phone_icon.png" width="11" height="18"> 
      </div>Call Me</a> 

     <a class="behance" href="http://behance.net/dannymcgee" target="_blank"> 
      <div class="icon-border"> 
      <img src="images/behance_icon.png" width="21" height="13"> 
      </div>See My Work</a> 
</nav> 

CSS:

header nav .icon-border { 
    display: inline-block; 
    border: 2px solid #000; 
    border-radius: 30px; 
    padding: 5px; 
    margin: 0 10px; 
    transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out; 
} 

header nav a:hover .icon-border { 
    padding: 10px; 
    margin: -10px 5px; 
    border: 2px solid #ddd; 
    transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out; 
} 

ne yaptığını görüyor musun? Kenar boşluklarını azaltarak ve vurgulu dolguyu artırarak, yuvarlak kenarlık, etrafına sarılan görüntünün konumunu değiştirmeden etkili bir şekilde büyür.

Oldukça iyi çalışıyor, ancak sorun, ilk animasyon tamamlanmadan önce, EMAIL ME'den fareyi ÇAĞRI ÇAĞINA hızlı bir şekilde hareket ettirir ve tam tersi durumda, tüm nav, bir pikselle yukarı ve aşağı "atlar". Ancak, bu sorun ÇAĞRI ME ile GÜNÜMÜZE GİTMEK arasında gerçekleşmez; bu da bana bunun düzeltilebilecek bir konu olduğuna inanmamı sağlar. Herhangi bir fikir?

Answer 1

Sana marjları geçiş (ve her zaman biraz sakat negatif marjlar kullanarak) çünkü mesele olduğuna inanıyoruz.

header nav .icon-border { 
    display: inline-block; 
    border: 2px solid #000; 
    border-radius: 30px; 
    padding: 5px; 
    margin: 0 10px; 
    transform: scale(1); /* you need a scale here to allow it to transition in both directions */ 
    transition: 0.15s all ease; 
} 

header nav a:hover .icon-border { 
    transform: scale(1.2); 
    border: 2px solid #ddd; 
} 

Answer 2

Belki bu işleri:

header nav a { 
    display: inline-block; 
}