本教程將指導(dǎo)您使用 HTML、CSS 和 JavaScript 構(gòu)建交互式 NFT 預(yù)覽卡。 受前端導(dǎo)師挑戰(zhàn)的啟發(fā)，該項(xiàng)目創(chuàng)建了一張有吸引力且引人入勝的卡片，顯示 NFT 詳細(xì)信息：圖像、價(jià)格、剩余時(shí)間和創(chuàng)建者信息。

設(shè)計(jì)目標(biāo)：

該卡片展示了 NFT：

1. NFT圖像展示。
2. 懸停效果顯示圖像上的顏色疊加。
3. 懸停時(shí)動(dòng)態(tài)文本和顏色變化（NFT 和創(chuàng)建者名稱）。
4. 跨各種設(shè)備的響應(yīng)式設(shè)計(jì)。

第 1 步：HTML 結(jié)構(gòu)

HTML 很簡單，組織 NFT 圖像、詳細(xì)信息和創(chuàng)建者信息。 id 屬性對于 JavaScript 交互至關(guān)重要。 一個(gè)簡化的例子：

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

該結(jié)構(gòu)有效地呈現(xiàn)了必要的 NFT 數(shù)據(jù)。

第 2 步：CSS 樣式

設(shè)計(jì)優(yōu)先考慮懸停效果和布局。交互性的關(guān)鍵 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，當(dāng)添加 active 類時(shí)變得可見（不透明度 0.5）。 使用 transition 屬性可確保平滑過渡。 將鼠標(biāo)懸停在 NFT 名稱或創(chuàng)建者名稱上可通過 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

這會(huì)添加/刪除 mouseenter/mouseleave 上的 active 類，控制覆蓋層的可見性。 類似的事件監(jiān)聽器管理 NFT 和創(chuàng)建者名稱的顏色變化。

第 4 步：定制

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

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

更改這些變量會(huì)更新整個(gè)組件的顏色。

結(jié)論：

這張 NFT 預(yù)覽卡提供了一種干凈、交互式的方式來展示 NFT。 HTML 結(jié)構(gòu)、CSS 樣式和 JavaScript 交互性的結(jié)合創(chuàng)造了響應(yīng)靈敏且引人入勝的用戶體驗(yàn)。

完整項(xiàng)目可訪問：http://m.miracleart.cn/link/f591ed4b09492933c2de77c78c9d9a66

以上是創(chuàng)建交互式 NFT 預(yù)覽卡組件的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！