欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS實現(xiàn)outline切換的動畫效果

  發(fā)布時間：2015-06-24 16:14:16   作者：張鑫旭   我要評論
這篇文章主要介紹了使用CSS實現(xiàn)outline切換的動畫效果,作者展示了一個應(yīng)用于注冊框中的方框自動切換位置的例子,需要的朋友可以參考下

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

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

焦點飛來飛去~

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

看上去很酷。

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

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

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

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

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

gif截圖走起~~~~~

首先是Chrome瀏覽器下：

然后是FireFox瀏覽器下：

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

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

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

相關(guān)CSS如下：

CSS Code復制內(nèi)容到剪貼板
  1. .focus-trans {   
  2.     // 那個移動的外發(fā)光的框框的初始位置和大小   
  3.     position: absolute; left: 99px; top: -100px;   
  4.     width: 100px; height: 30px;   
  5.     // Chrome瀏覽器下使用瀏覽器自帶的focus效果，這里的5px其實是醬油   
  6.     outline: 5px auto -webkit-focus-ring-color;   
  7.     // IE10+, FireFox瀏覽器下藍色的藍色框框效果（模擬Safari）   
  8.     box-shadow: 0 0 2px 3px #78aeda, 0 0 2px #78aeda inset;   
  9.     -webkit-box-shadow: none;   
  10.     border-radius: 3px;   
  11.     // 為的是失去焦點時候，框框立即消失   
  12.     -webkit-transition: none;   
  13.     transition: none;   
  14.     // Firefox有bug，所以這里補丁了下   
  15.     -moz-transition: all .15s;   
  16. }  

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

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

CSS Code復制內(nèi)容到剪貼板
  1. .code:focus ~ .focus-trans {  width: 130px; height: 42px; left: 99px; top: 66px; }  

看上去效果還不錯。

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

相關(guān)文章

最新評論