我記得有個版本的迅雷軟件，會發(fā)現focus文本框時候，其外發(fā)光的外掛會跟著動畫移動。據說這一系列N動畫交互引擎的維護成本還是挺高的。

今天，偶然看到一個名叫Nikita Vasilyev的兄弟在web頁面上折騰了個類似效果，您有興趣可以點擊這里瞅瞅。Github地址為：https://github.com/NV/flying-focus/

焦點飛來飛去~

使用很簡單，只要在頁面上加載了下面這個JS: flying-focus.js 就可以實現Tab切換焦點框的時候，焦點框是飛過去的~~

看上去很酷。

不過，對于實際的對外項目而言，價值并不大。首先是兼容性，其次是JS依賴，再者是全局處理（影響頁面所有元素）。由于借助pointer-events:none，只有Chrome以及Safari支持。不過，在一些特殊或重要的表單上使用這種增強的交互可能會有出彩的效果。也就是只適合局部使用。或者在個人網站上用用。對于大多數內網項目，華而不實的效果沒有任何意義。

但是，作者的想法與創(chuàng)意是相當好的。于是，我們可以再其創(chuàng)造性的idea上揉進自己的技術，折騰出其他些東西。

例如，我就有個蛋疼的想法：“哈，使用純CSS可不可以實現類似效果呢？”

一頓啪啪啪，喲，有個略有模樣的demo還真出來了。再次賣弄下。
CSS實現的outline動畫

哈，說到現在，估計大多數人還不清楚我叨叨到現在的效果是個什么樣子呢？

gif截圖走起~~~~~

首先是Chrome瀏覽器下：

然后是FireFox瀏覽器下：

您可以狠狠地點擊這里：使用CSS實現focus outline動畫效果demo

相比JS方法，我這里的CSS只是針對demo中的表單有效果，支持的瀏覽器多了一類，就是IE10+.

使用了focus偽類和相鄰選擇器對外發(fā)光的元素進行了位置和尺寸的控制，配合transition就有了動畫效果啦！

相關CSS如下：