建立互動式 NFT 預覽卡元件

本教學將引導您使用 HTML、CSS 和 JavaScript 建立互動式 NFT 預覽卡。 受前端導師挑戰的啟發，該專案創建了一張有吸引力且引人入勝的卡片，顯示 NFT 詳細資訊：圖像、價格、剩餘時間和創建者資訊。

設計目標：

卡片展示了 NFT：

1. NFT影像展示。
2. 懸停效果顯示影像上的顏色疊加。
3. 懸停時動態文字和顏色變化（NFT 和創建者名稱）。
4. 跨各種裝置的響應式設計。

第 1 步：HTML 結構

HTML 很簡單，組織 NFT 映像、詳細資訊和創建者資訊。 id 屬性對於 JavaScript 互動至關重要。 一個簡化的例子：

<div id="nft-card">
  <div id="nft-image">...</div>
  <div id="nft-details">...</div>
  <div id="nft-creator">...</div>
</div>

該結構有效地呈現了必要的 NFT 數據。

第 2 步：CSS 樣式

設計優先考慮懸停效果和佈局。互動性的關鍵 CSS：

.nft-image-container .overlay {
  position: absolute;
  /* ... other styles ... */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nft-image-container.active .overlay {
  opacity: 0.5;
}

.heading {
  cursor: pointer;
  transition: color 0.3s ease;
}

.name-active, .author-active {
  color: var(--active-color);
}

.overlay 最初具有 opacity: 0，當新增 active 類別時變得可見（不透明度 0.5）。 使用 transition 屬性可確保平滑過渡。 將滑鼠懸停在 NFT 名稱或創建者名稱上可透過 name-active 和 author-active 類別更改文字顏色，由 JavaScript 處理。

第 3 步：JavaScript 互動

JavaScript 處理懸停效果：

let imageCard = document.querySelector("#nft-image");

imageCard.addEventListener("mouseenter", () => {
  imageCard.classList.add('active');
});

imageCard.addEventListener("mouseleave", () => {
  imageCard.classList.remove('active');
});

// Similar event listeners for #nft-name and #nft-creator

這會新增/刪除 mouseenter/mouseleave 上的 active 類，控制覆蓋層的可見性。 類似的事件監聽器管理 NFT 和創建者名稱的顏色變化。

第 4 步：客製化

:root 選擇器定義配色方案，簡化自訂：

:root {
  --main-bg: hsl(217, 54%, 11%);
  /* ... other color variables ... */
}

更改這些變數會更新整個組件的顏色。

結論：

這張 NFT 預覽卡提供了一種乾淨、互動的方式來展示 NFT。 HTML 結構、CSS 樣式和 JavaScript 互動性的結合創造了回應靈敏且引人入勝的使用者體驗。

完整項目可參閱：https://www.php.cn/link/f591ed4b09492933c2de77c78c9d9a66

以上是建立互動式 NFT 預覽卡元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！