我想在我的网站上添加一些过渡.我已经知道当有人在输入字段中时(所以：焦点)边框会随着过渡而改变颜色.我希望从中心到左右发生这种转变.
所以动画是双方扩大的边界.这可能与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>
