CSS：底部边框过渡 - 从中​​间展开

Question

我想添加一些过渡到我的网站。我已经有了，当有人在输入字段（所以：焦点）时，边框会随着转换而改变颜色。我希望这种转变发生在从中心到左侧和右侧。

所以动画是双方扩大边界。这可能与CSS？如果我必须使用Jquery或Javascript，那很好。

由于提前， 伊恩

Answer 1

您可以利用CSS边界过渡。 希望这有助于。 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; 
}