CSS:bottom-border-transition - 从中​​间展开 [英] CSS: bottom-border-transition - expand from middle

问题描述

我想为我的网站添加一些过渡效果.我已经有了，当有人在输入字段中时(所以 :focus)，边框会随着过渡而改变颜色.我希望这种过渡发生在从中心到左右的过渡.

I want to add a bit of transitions to my website. I already have that when someone is in a input-field (so :focus) the border changes color with a transition. I would like that transition to happen from the center to left and right.

因此动画是向两侧扩展边框.用CSS可以吗?如果我必须使用 Jquery 或 Javascript，那没问题.

So the animation is an expanding border to both sides. Is that possible with CSS? If I have to use Jquery or Javascript it's fine.

提前致谢，伊恩

推荐答案

您可以使用 CSS 进行边框过渡.希望这可以帮助.CODEPEN 示例

You can do the border transition with CSS. Hope this helps. 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>

这篇关于CSS:bottom-border-transition - 从中​​间展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！