我記得有個(gè)版本的迅雷軟件，會(huì)發(fā)現(xiàn)focus文本框時(shí)候，其外發(fā)光的外掛會(huì)跟著動(dòng)畫(huà)移動(dòng)。據(jù)說(shuō)這一系列N動(dòng)畫(huà)交互引擎的維護(hù)成本還是挺高的。

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

焦點(diǎn)飛來(lái)飛去~

使用很簡(jiǎn)單，只要在頁(yè)面上加載了下面這個(gè)JS: flying-focus.js 就可以實(shí)現(xiàn)Tab切換焦點(diǎn)框的時(shí)候，焦點(diǎn)框是飛過(guò)去的~~

看上去很酷。

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

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

例如，我就有個(gè)蛋疼的想法：“哈，使用純CSS可不可以實(shí)現(xiàn)類(lèi)似效果呢？”

一頓啪啪啪，喲，有個(gè)略有模樣的demo還真出來(lái)了。再次賣(mài)弄下。
CSS實(shí)現(xiàn)的outline動(dòng)畫(huà)

哈，說(shuō)到現(xiàn)在，估計(jì)大多數(shù)人還不清楚我叨叨到現(xiàn)在的效果是個(gè)什么樣子呢？

gif截圖走起~~~~~

首先是Chrome瀏覽器下：

然后是FireFox瀏覽器下：

您可以狠狠地點(diǎn)擊這里：使用CSS實(shí)現(xiàn)focus outline動(dòng)畫(huà)效果demo

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

使用了focus偽類(lèi)和相鄰選擇器對(duì)外發(fā)光的元素進(jìn)行了位置和尺寸的控制，配合transition就有了動(dòng)畫(huà)效果啦！

相關(guān)CSS如下：

form *:focus ~ .focus-trans { transition: all .15s;}

哈哈，應(yīng)該不難理解。
~選擇器表示相鄰的兄弟元素。于是，我們就可以控制外發(fā)光的框框了，例如：

看上去效果還不錯(cuò)。

實(shí)際上，還是有諸多限制的。首先，表單元素必須相鄰，否則無(wú)法控制同一個(gè)元素，也就無(wú)法實(shí)現(xiàn)連續(xù)的動(dòng)畫(huà)；其次，每個(gè)控件的outline位置以及大小都是要沖定義的，實(shí)現(xiàn)的工時(shí)成本比較高，只能在局部重用位置使用。

最新評(píng)論