创建交互式 NFT 预览卡组件

本教程将指导您使用 HTML、CSS 和 JavaScript 构建交互式 NFT 预览卡。 受前端导师挑战的启发，该项目创建了一张有吸引力且引人入胜的卡片，显示 NFT 详细信息：图像、价格、剩余时间和创建者信息。

设计目标：

该卡片展示了 NFT：

1. NFT图像展示。
2. 悬停效果显示图像上的颜色叠加。
3. 悬停时动态文本和颜色变化（NFT 和创建者名称）。
4. 跨各种设备的响应式设计。

第 1 步：HTML 结构

HTML 很简单，组织 NFT 图像、详细信息和创建者信息。 id 属性对于 JavaScript 交互至关重要。 一个简化的例子：

<code class="language-html"><div id="nft-card">
  <div id="nft-image">...</div>
  <div id="nft-details">...</div>
  <div id="nft-creator">...</div>
</div></code>

该结构有效地呈现了必要的 NFT 数据。

第 2 步：CSS 样式

设计优先考虑悬停效果和布局。交互性的关键 CSS：

<code class="language-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);
}</code>

.overlay 最初具有 opacity: 0，当添加 active 类时变得可见（不透明度 0.5）。 使用 transition 属性可确保平滑过渡。 将鼠标悬停在 NFT 名称或创建者名称上可通过 name-active 和 author-active 类更改文本颜色，由 JavaScript 处理。

第 3 步：JavaScript 交互

JavaScript 处理悬停效果：

<code class="language-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</code>

这会添加/删除 mouseenter/mouseleave 上的 active 类，控制覆盖层的可见性。 类似的事件监听器管理 NFT 和创建者名称的颜色变化。

第 4 步：定制

:root 选择器定义配色方案，简化自定义：

<code class="language-css">:root {
  --main-bg: hsl(217, 54%, 11%);
  /* ... other color variables ... */
}</code>

更改这些变量会更新整个组件的颜色。

结论：

这张 NFT 预览卡提供了一种干净、交互式的方式来展示 NFT。 HTML 结构、CSS 样式和 JavaScript 交互性的结合创造了响应灵敏且引人入胜的用户体验。

完整项目可访问：https://www.php.cn/link/f591ed4b09492933c2de77c78c9d9a66

以上是创建交互式 NFT 预览卡组件的详细内容。更多信息请关注PHP中文网其他相关文章！