CSS：底部边界过渡 - 从中​​间展开 [英] CSS: bottom-border-transition - expand from middle

问题描述

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

所以动画是双方扩大的边界。这是可能的CSS？如果我必须使用jquery或Javascript，那就没问题了。

在此先感谢
Ian

解决方案

你可以用CSS做边界转换。
希望这有助于。
CODEPEN示例

< HTML：

 < ul> 
< li>< a href =＃>主页< / a>< / li> 
< li>< a href =＃> PAGE< / a>< / li> 
< li>< a href =＃>关于我们< / a>< / li> 
< li>< a href =＃>联系我们< / 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：在{
 content：''; 
 display：block; 
 margin：auto; 
 height：3px; 
 width：0px; 
背景：透明; 
过渡：宽度.5s缓解，背景颜色.5s缓解; 
} 
 li：hover：在{
 width：100％; 
背景：蓝色; 
} 
  

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.

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.

Thanks in advance, Ian

解决方案

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

这篇关于CSS：底部边界过渡 - 从中​​间展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！