我想在我的网站上添加一些过渡.我已经知道当有人在输入字段中时(所以：焦点)边框会随着过渡而改变颜色.我希望从中心到左右发生这种转变.
所以动画是双方扩大的边界.这可能与CSS有关吗？如果我必须使用Jquery或Javascript它没关系.
提前致谢,
伊恩
解决方法
您可以使用CSS进行边框转换.
希望这可以帮助.
CODEPEN example
希望这可以帮助.
CODEPEN example
HTML：
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;
}
<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>
