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等。

閱讀更多 IP搬磚工 的文章

關鍵字: CSS 點擊 HTML