HTML5 CSS3實現新增鎖屏效果

鎖屏效果，也就是將螢幕置於模態，不允許使用者觸發任何動作，只能解除鎖定後才能繼續使用，jqueryui的dialog有模態對話方塊，這一點不難做到。那麼，首先需要在頁面中新增乙個div層，用於做模態的層： 

其對應的css比較簡單，主要設定一下z-index屬性，值設定的很大即可，就能達到覆蓋其餘元素的效果，加上opacity淡化一下背景： 

#overlay  

這樣就有了乙個覆蓋頁面之上的層，顯示效果為： 

下面是新增解除鎖定的部分，我們模仿iphone解鎖效果，那麼需要新增一下： 

span>  

滑動解除鎖定span>  

div>  

#slide  

這裡設定的z-index要比模態層大，這樣我們才能操控到，沒什麼多說的。 

#slider  

滑塊中使用了，這樣效果更好點，矩形框的寬度和滑塊設定一致，margin等可以自行繼續微調。下面是關鍵的text區域部分，這裡使用的效果目前僅webkit核心支援，那麼就是說ff暫時不支援該效果。 

#text  

加上下面的動畫： 

@-webkit-keyframes slidetounlock   

100%  

}  

我們模仿出的最後效果為： 

圖中文字部分動態高亮部門就是其它核心暫時不支援的部分了，這樣我們的效果就完成了，此時都是靜態的，什麼操作也做不了，我們使用jqueryui的draggable來新增動態效果： 

$(function()  else   

},  

stop: function(event, ui) );  

}  }  

});       

});  

我們動態獲取設定的slide寬度，然後應用draggable方法，設定橫向拖動，並在拖動距離達到矩形長度的70%時，模態層和滑塊消失，還原到頁面中。那麼我們就完成了給頁面新增鎖屏的效果了。 

最後附上原始碼，希望對使用者有用。

HTML5 CSS3實現新增鎖屏效果

鎖屏效果，也就是將螢幕置於模態，不允許使用者觸發任何動作，只能解除鎖定後才能繼續使用，jqueryui的dialog有模態對話方塊，這一點不難做到。那麼，首先需要在頁面中新增乙個div層，用於做模態的層 html 其對應的css比較簡單，主要設定一下z index屬性，值設定的很大即可，就能達到覆蓋...

HTML5 CSS3新增特性 （筆記）（2）

動畫效果 彈性盒模型 使用過渡可以動態地改變乙個顏色的值，以動畫的形式過渡到另乙個顏色 簡寫格式 transition transition 過渡屬性 過渡時間 不能省略 過渡效果 延遲時間 這些屬性也可以進行分別定義 可以使用transition property屬性來指定要參與過渡的css屬性名...

初學HTML5 CSS3動畫

乙個完整的css animations由兩部分構成 在css3中使用 keyframes規則來建立動畫，keyframes可以設定多個關鍵幀，每個關鍵幀表示動畫過程中的乙個狀態，多個關鍵幀就可以使動畫十分絢麗。keyframes animationname animation屬性用於描述動畫的css...