元素更改焦點過渡效果

如何實現焦點從元素更改爲另一個元素的效果。元素更改焦點過渡效果

像例如檢查本網站在鉻。

它具有用於從一個元件跳躍焦點到另一個一些過渡效果。

我想要同樣的效果。我試過下面的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中缺少一些東西？

來源

2016-11-25 Ahmad

u能告訴我們更多的代碼？請創建一個小提琴 –

它只能使用JavaScript來完成。有關更多信息，請參閱以下網址：https：//github.com/NV/flying-focus –

你的意思是？

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個聲明。首先是基本規則，第二個「懸停」規則。

第一條規則描述了轉換到第二條規則的標準。第二條規則只是改變了選項。

來源

2016-11-25 09:47:53

不適用。他意味着飛行焦點的轉變。 –

並且不要使用'！important'。不是一個好主意。 –

如果不是你，我真的很抱歉。我已經將這個問題標記爲mod，讓他們看看。如果我無意冒犯了你，我很抱歉！ '（' –

這是一個JavaScript UI概念，使用::after和::before僞元素。完整的源代碼可在這裏找到：GitHub - NV/flying-focus。

還有一個關於它在YouTube中的工作原理的解釋。

片段

<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 />

爲了澄清我寫的答案是正確的，我可以從Who uses Flying Focus: In the Wild截圖，其中包含WebAIM.org如要求由OP。

來源

2016-11-25 10:19:31

元素更改焦點過渡效果

回答

相關問題