家好，今天給大家介紹一款， webgl實現的動態3d卡片背景特效html頁面源碼，（圖1）。送給大家哦，獲取方式在本文末尾。

鼠標懸停的時候，卡片背景圖片的3d效果會發生變化（圖2）

可以用鼠標左右拖動卡片瀏覽（圖3）

代碼完整，需要的朋友可以下載學習（圖4）

本源碼編碼：10175，需要的朋友，點擊下面的鏈接后，搜索10175，即可獲取。

就愛UI - 分享UI設計的點點滴滴

家好，今天給大家介紹一款，css實現的卡片式漸變色卡html頁面前端源碼（圖1），送給大家哦，獲取方式在本文末尾。

不同顏色的漸變，給用戶炫酷的視覺體驗（圖2）

源碼完整，需要的朋友可以下載學習（圖3）

本源碼編碼：20232，需要的朋友，訪問下面鏈接后，搜索20232，即可獲取。

就愛UI - 分享UI設計的點點滴滴

習借助網絡技術將舊的單選按鈕轉換為具有現代外觀的單選卡。

單選按鈕是表單的關鍵元素之一。當以正確的方式使用時，這些是驚人的，因為它們簡化了從給定列表中選擇一個選項的任務。但是默認的單選按鈕看起來不太好。我們需要對其進行改造，使其在用戶看來令人驚嘆，這將顯著改善網站的用戶體驗。

在本文中，我將逐步介紹如何在 Web 應用程序中實現自定義單選卡。在這里，我們將把舊的單選按鈕變成漂亮的 CSS 卡片。每張卡片都有一個檢查（勾號）圖標，默認情況下它是隱藏的，并且僅在用戶單擊卡片時才會出現。

通過 3 個簡單的步驟構建令人驚嘆的無線電卡

1. 使用 HTML 創建單選卡的布局。
2. 使用 JavaScript 使無線電卡功能化。
3. 使用 CSS 設計無線電卡。

第 1 步：使用 HTML 創建單選卡的布局

讓我們為我們的單選卡設置一個基本的 HTML 布局。它將包括一個容納卡片的容器。在其中，我們將添加三張卡片，每張卡片都有一個勾號（勾號）圖標、一個卡片圖標（圖像）、一個卡片標簽（標題）和一個卡片標簽說明（附加內容）。每個無線電卡都有一個名為 radio-card 的通用類，為了使其正常工作，我們需要為每個無線電卡添加另一個獨特的類，例如 radio-card-1、radio-card-2、radio-card-3 和很快。這些卡片將有一個 onclick 屬性，該屬性將調用名為 selectRadioCard() 的函數。在參數中傳遞卡號，如 1、2 或 3。我們將在下一步編寫使卡片正常工作的邏輯。

將以下代碼片段添加到您要實現自定義單選卡的部分。

<div>
    <h1>Create Stunning Radio Cards Using HTML, CSS, and JavaScript</h1>
    <div id="radio-cards-container">
        <!-- Radio Card 1 -->
        <div class="radio-card radio-card-1" onclick="selectRadioCard('1')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->
            <div class="text-center">
                <div class="radio-card-icon">
                    <img src="./images/icon-react.png" alt="React" />
                </div>
                <div class="radio-card-label">
                    React
                </div>
                <div class="radio-card-label-description">
                    Build an application using React.
                </div>
            </div>
        </div>
        <!-- Radio Card 2 -->
        <div class="radio-card radio-card-2" onclick="selectRadioCard('2')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->
            <div class="text-center">
                <div class="radio-card-icon">
                    <img src="./images/icon-angular.png" alt="Angular" />
                </div>
                <div class="radio-card-label">
                    Angular
                </div>
                <div class="radio-card-label-description">
                    Build an application using Angular.
                </div>
            </div>
        </div>
        <!-- Radio Card 3 -->
        <div class="radio-card radio-card-3" onclick="selectRadioCard('3')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->
            <div class="text-center">
                <div class="radio-card-icon">
                    <img src="./images/icon-vue.png" alt="Vue" />
                </div>
                <div class="radio-card-label">
                    Vue
                </div>
                <div class="radio-card-label-description">
                    Build an application using Vue.
                </div>
            </div>
        </div>
    </div>
</div>

第 2 步：使用 JavaScript 使無線電卡功能化

現在，我們需要實現當用戶觸發卡片上的點擊事件時使單選卡片起作用的邏輯。 添加一個名為 selectRadioCard 的函數，它將接受一個名為 cardNo 的參數。 它將首先找到所有的無線電卡，然后遍歷它們中的每一個，并刪除選定的類。 之后，它將找到具有指定卡號的元素，如 radio-card-1、radio-card-2 或 radio-card-3，并將選擇的類添加到其中。

在頁面上的腳本元素中添加以下代碼片段。 或者，您可以創建一個外部 JavaScript 文件并使用它。

const selectRadioCard = (cardNo) => {
    /**
     * Loop through all radio cards, and remove the class "selected" from those elements.
     */
    const allRadioCards = document.querySelectorAll(".radio-card");
    allRadioCards.forEach((element, index) => {
        element.classList.remove(["selected"]);
    });
    /**
     * Add the class "selected" to the card which user has clicked on.
     */
    const selectedCard = document.querySelector(".radio-card-" + cardNo);
    selectedCard.classList.add(["selected"]);
};

第 3 步：使用 CSS 設計無線電卡

由于我們已經完成了自定義單選卡的實現，我們需要添加一些 CSS 片段來設計我們的 HTML 內容的布局。

將以下代碼片段添加到頁面上的樣式元素。 或者，您可以創建一個外部 CSS 文件并使用它。

#radio-cards-container {
    margin-top: 5rem;
    width: 75vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.radio-card {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 300px;
    margin-right: 2rem;
    margin-bottom: 2rem;
    padding: 3rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.radio-card:hover {
    border: 2px solid #016787;
    cursor: pointer;
}

.radio-card-check {
    display: none;
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
}

.radio-card-check i {
    font-size: 1.6rem;
    color: #016787;
}

.text-center {
    text-align: center;
}

.radio-card-icon img {
    width: 80px;
}

.radio-card-label {
    margin-top: 1rem;
    font-weight: 600;
    font-size: 1.2rem;
}

.radio-card-label-description {
    margin-top: 0.5rem;
    color: rgba(0, 0, 0, 0.7);
}

.radio-card.selected {
    border: 2px solid #016787;
}

.radio-card.selected .radio-card-check {
    display: inline-flex;
}

結果

您已完成學習如何使用純 HTML、CSS 和 JavaScript 創建令人驚嘆的單選卡。

關注七爪網，獲取更多APP/小程序/網站源碼資源！