重新創建NetLify＆＃039;巧妙的滑動按鈕效果

Netlify官網的下載按鈕設計簡潔而優雅，吸引眼球又不顯突兀，其交互效果尤其令人印象深刻：鼠標懸停時，按鈕擴展並顯示“Download”字樣。 我注意到Safari瀏覽器下顯示略有差異，這激發了我探究其實現方式的興趣。因此，我嘗試復現了該效果，並對間距進行了優化。

其核心技術在於四個方面：

• 利用left屬性控制“Download”標籤的顯示和隱藏。
• 利用按鈕懸停狀態下的padding屬性為“Download”標籤騰出空間。
• 在按鈕懸停狀態下聲明scale(1, 1) ，確保內容在移動時保持完整。
• 使用transition屬性對按鈕的padding 、 background-position position )和transform屬性進行動畫過渡，實現流暢的動畫效果。

以下是不包含樣式的代碼示例，更清晰地展現其原理：

如果難以理解其運作方式，下圖展示了“Download”標籤如何通過overflow: hidden隱藏在按鈕之外，以及鼠標懸停時如何將其推入視野。

通過為圖標和“Download”標籤設置負的left值，將其隱藏，然後在鼠標懸停整個按鈕時將其重置為正值。

 /* 默認狀態*/
.button {
    background: 
      #f6bc00 
      url(data:image/svg xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
}

.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

/* 懸停狀態*/
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
}

.button span:nth-child(1) {
  position: absolute;
  left: -70px;
}

需要注意的是，僅此狀態下，圖標會滑入視野，並為“Download”標籤留出足夠空間，但標籤會在懸停時漂浮在按鈕之外。

這時，在按鈕上添加scale(1, 1)可以保持內容完整。

 /* 懸停狀態*/
.button:hover {
  padding-left: 95px;
  background-position: 5px center;
  transform: scale(1, 1);
}

padding值是經驗值，會根據字體、字號等因素而變化。

最後， transition屬性使動畫過渡平滑，提升用戶體驗。

 /* 默認狀態*/
.button {
    background: 
      #f6bc00 
      url(data:image/svg xml;base64,...)
      no-repeat -12px center;
    overflow: hidden;
    transition: padding .2s ease, background-position .2s ease, transform .5s ease;
}

添加一些細節修飾，如圓角等，即可得到一個精美的按鈕。

以上是重新創建NetLify＆＃039;巧妙的滑動按鈕效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！