HTML-CSS樣式過渡:漸變式網頁元素

在網頁設計中,為了方便用戶查看,或者是增加用戶點擊的趣味性,在用戶點擊網頁元素之前,用戶點擊網頁元素之後,網頁元素呈現的樣式是有區別的,比如在用戶點擊後,網頁元素可以變灰色等,以標記用戶的訪問記錄,本文對該實現方式進行介紹:

HTML-CSS樣式過渡:漸變式網頁元素

圖片源於網絡

<code>p{定義樣式} //點擊前的樣式
p:hover{定義樣式}//點擊後的樣式/<code>

具體如例1:

<code>p{
width:100px;
height:;
background-color:顏色1/<code>

例子1中當用戶點擊元素之後,元素寬和高會直接變化,背景也會直接變化,這種可以理解為直接過渡樣式。在有些情況下,可能我們想要逐漸變化的效果,那麼這種時候,就可以利用transition-delay(延遲一段時間變化),transition-duration(在這段時間內逐漸變化),具體如例2:

<code>p{
width:寬度1;
height:高度1;
background-color:顏色1;}
p{
width:寬度2;
height:高度2;
background-color:顏色2;
transition-delay:時長;//定義什麼時候變化
transition-duration; //定義變化持續時間
} /<code>

有時候,上述transition-duration可能不是所有瀏覽器都能支持,所以為了保證對應瀏覽器能夠支持,可以在transition-duration之前加上"-瀏覽器元素”,使得該HTML代碼可以適配對應的瀏覽器,例如-websit,-o等。


分享到:


相關文章: