我記得有個版本的迅雷軟體，會發現focus文字框時候，其外發光的外掛程式會跟著動畫移動。據說這一系列n動畫互動引擎的維護成本還是挺高的。
今天，偶然看到乙個名叫nikita vasilyev的兄弟在web頁面上折騰了個類似效果，您有興趣可以點選這裡瞅瞅。github位址為：
焦點飛來飛去~
使用很簡單，只要在頁面上載入了下面這個js: flying-focus.js 就可以實現tab切換焦點框的時候，焦點框是飛過去的~~
看上去很酷。
不過，對於實際的對外專案而言，價值並不大。首先是相容性，其次是js依賴，再者是全域性處理（影響頁面所有元素）。由於借助pointer-events:none，只有chrome以及safari支援。不過，在一些特殊或重要的表單上使用這種增強的互動可能會有出彩的效果。也就是只適合區域性使用。或者在個人**上用用。對於大多數內網專案，華而不實的效果沒有任何意義。
但是，作者的想法與創意是相當好的。於是，我們可以再其創造性的idea上揉進自己的技術，折騰出其他些東西。
例如，我就有個蛋疼的想法：「哈，使用純css可不可以實現類似效果呢？」
一頓**啪，喲，有個略有模樣的demo還真出來了。再次賣弄下。
css實現的outline動畫
哈，說到現在，估計大多數人還不清楚我叨叨到現在的效果是個什麼樣子呢？
gif截圖走起~~~~~
首先是chrome瀏覽器下：
然後是firefox瀏覽器下：
您可以狠狠地點選這裡：使用css實現focus outline動畫效果demo
相比js方法，我這裡的css只是針對dem程式設計客棧o中的表單有效果，支援的瀏覽器多了一類，就是ie10+.
使用了focus偽類和相鄰選擇器對外發光的元素進行了位置和尺寸的控制，配合transition就有了動畫效果啦！
相關css如下：
css code複製內容到剪貼簿
www.cppcns.com
form *:focus ~ .focus-trans
哈哈，應該不難理解。
~選擇器表示相鄰的兄弟元素。於是，我們就可以控制外發光的框框了，例如：
css code複製內容到剪貼簿
看上程式設計客棧去效果還不錯。
實際上，還是有諸多限制的。首先，表單元素必須相鄰，否則無法控制同乙個元素，也就無法實現連續的動畫；其次，每個控制項的outline位置以及大小都是要衝定義的，實現的工時成本比較高，只能在區域性重用位置使用。
本文標題: 使用css實現outline切換的動畫效果
本文位址: /web/css/83421.html
簡單了解css3輪廓outline
outline屬性是用來設定乙個或多個單獨的輪廓屬性的簡寫屬性 例如 輪廓有下面幾個屬性 他們有一種簡寫形式 輪廓的特點 輪廓不佔據空間，它們被描繪於內容之上。可以做到下圖的效果 當然我們可以做更好玩的東西，比如乙個 號 具體css如下 divoutline offset 66px 是關鍵，它表示輪...
C 使用CurrentUICulture切換語言
1 建立2個視窗 2 視窗1屬性localizable設定為true，language選擇英語 美國 然後把視窗1中控制項的text由中文編輯成英文，form2一樣設定。此時，form1下會自動生成乙個en us.resx的檔案。3 把language都切換回default 4 新增如下 publi...
使用 ArcGIS Desktop 切瓦片
目錄arcgis有預設的切片方案，如果需要自定義切片規則，需要先生成乙個切片方案。開啟arcmap，開啟工具箱 tools box 系統工具箱 system tools box 資料管理工具 data managment tools 切片快取 tile cache 生成切片快取切片方案 genera...