CSS: alt sınır geçişi - ortadan genişle

Question

Web siteme biraz geçiş eklemek istiyorum. Birisi bir giriş alanında (yani: odakta) olduğunda, kenarlık bir geçiş ile renk değiştirir. Bu geçişin merkezden sola ve sağa olmasını istiyorum.

Bu nedenle animasyon her iki tarafa da genişleyen bir kenardır. Bu CSS ile mümkün mü? Jquery veya Javascript kullanmam gerekiyorsa, sorun yok. peşin

sayesinde Ian

Answer 1

CSS içeren sınır geçişi yapabilirsiniz. Bu yardımcı olur umarım. CODEPEN example

HTML:

<ul> 
    <li><a href="#">HOME</a></li> 
    <li><a href="#">PAGE</a></li> 
    <li><a href="#">ABOUT US</a></li> 
    <li><a href="#">CONTACT US</a></li> 
</ul> 

CSS:

body { 
    padding: 50px; 
} 

a, a:hover { 
    color: #000; 
    text-decoration: none; 
} 

li { 
    display: inline-block; 
    position: relative; 
    padding-bottom: 3px; 
    margin-right: 10px; 
} 
li:last-child { 
    margin-right: 0; 
} 

li:after { 
    content: ''; 
    display: block; 
    margin: auto; 
    height: 3px; 
    width: 0px; 
    background: transparent; 
    transition: width .5s ease, background-color .5s ease; 
} 
li:hover:after { 
    width: 100%; 
    background: blue; 
}