使用 SVG 制作單選和多選框動畫【附源碼】

　　通過 JavaScript 實現 SVG 路徑動畫，我們可以做很多花哨的東西。今天我們要為您介紹一些復選框和單選按鈕效果。實現的主要思路是隱藏原生的輸入框，使用偽元素創造更具吸引力的樣式，輸入框被選中的時候執行 SVG 動畫。

　　

 

在線演示      立即下載

 

　　溫馨提示：為保證最佳的效果，請在 IE10+、Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽。

　　對於自定義的復選框或單選按鈕，我們使用標簽的偽元素 ::before 並通過設置不透明度為0來因此輸入框。初始，我們通過 JavaScript 在輸入框后面添加必要的 SVG 元素。不過它們是不可見的，因為它們的路徑是空的，一旦我們選中輸入框，我們給元素應用適當的過渡路徑動畫。

　　這是一個簡單的表單 HTML 結構示例：

<form class="ac-custom ac-checkbox ac-cross">
    <h2>How do you collaboratively administrate empowered markets via plug-and-play networks?</h2>
    <ul>
        <li><input id="cb1" name="cb1" type="checkbox"><label for="cb1">Efficiently unleash information</label></li>
        <li><input id="cb2" name="cb2" type="checkbox"><label for="cb2">Quickly maximize timely deliverables</label></li>
        <li><input id="cb3" name="cb3" type="checkbox"><label for="cb3">Dramatically maintain solutions</label></li>
        <li><input id="cb4" name="cb4" type="checkbox"><label for="cb4">Completely synergize relationships</label></li>
        <li><input id="cb5" name="cb5" type="checkbox"><label for="cb5">Professionally cultivate customer service</label></li>
    </ul>
</form>

　　我們使用的是無序列表，包含輸入框和標簽。核心的樣式用於使輸入框不可見並使用偽元素創建自定義的輸入框：

.ac-custom label {
    display: inline-block;
    position: relative;
    font-size: 2em;
    padding: 0 0 0 80px;
    vertical-align: top;
    color: rgba(0,0,0,0.2);
    cursor: pointer;
    transition: color 0.3s;
}
 
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
    width: 50px;
    height: 50px;
    top: 50%;
    left: 0;
    margin-top: -25px;
    position: absolute;
    cursor: pointer;
}
 
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
    opacity: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 100;
}
 
.ac-custom label::before {
    content: '';
    border: 4px solid #fff;
    transition: opacity 0.3s;
}

　　當輸入框被選中時，我們動態改變“偽復選框”的不透明度和標簽的顏色：

.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
    color: #fff;
} 
 
.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
    opacity: 0.8;
}

 

在線演示      立即下載

 

您可能感興趣的相關文章

• 創意無限！一組網頁邊欄過渡動畫【附源碼下載】
• 真是好東西！13種非常動感的頁面加載動畫效果
• 你見過嗎？9款超炫的復選框（Checkbox）效果
• 超贊！基於 Bootstrap 的響應式的后台管理模板
• Magic CSS3 – 幫助你實現神奇的交互動畫效果

 

本文鏈接：使用 SVG 制作單選和多選框動畫 via Codrops

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源