元素改变焦点过渡效果

Question

如何实现从元素到另一个元素的焦点更改效果。

例如，请在chrome中查看此网站。

http://webaim.org/

它有一些过渡效果，可以将焦点从一个元素跳到另一个元素。

我想要同样的效果。我尝试过以下css，但它无效。

color: #BF1722;
transition: color 0.2s ease-in, text-shadow 0.2s ease-in;
-webkit-transition: color 0.2s ease-in, text-shadow 0.2s ease-in;
text-shadow: #bbb 1px 1px 1px;

是否涉及任何JavaScript？或者我在CSS中遗漏了什么？

Answer 1

你是说这个吗？

a {
    transition: color 0.2s ease-in, text-shadow 0.2s ease-in, background-color 0.25s linear 0s;
}

a:hover {
    text-shadow: #bbb 1px 1px 1px;
    background-color: #ffffcc;
    color: #BF1722;
}

<a>test test test test</a>

您需要有2个声明。首先是基本规则，第二个是“悬停”规则。

第一条规则描述了转换到第二条规则的标准。 第二条规则只是改变了选项。

Answer 2

这是一个JavaScript UI概念，使用::after和::before伪元素。完整的源代码可在此处获取：GitHub - NV/flying-focus。

还解释了它在YouTube中的工作原理。

<强>段

＆＃13;

＆＃13;

<script src="http://n12v.com/focus-transition/flying-focus.js"></script>
<input /><br /><br /><br /><br />
<input /><br /><br /><br /><br />
<input /><br /><br /><br /><br />
<input />

＆＃13;

＆＃13;

＆＃13;

为了澄清我写的答案是对的，我可以按照OP的要求从Who uses Flying Focus: In the Wild获取包含WebAIM.org的屏幕截图。