卡卡網(wǎng)

對于checkbox多選框和radio單選框，你是不是有點審美疲勞了，因為樣式千篇一律，今天給大家來點創(chuàng)新的，用SVG來設(shè)計出可動畫交互的checkbox多選框和radio單選框，并且有8款那么多。

話不多說，我們先看第一款，用SVG創(chuàng)建的動畫checkbox多選框。

1、打叉checkbox

demodownload

實現(xiàn)代碼

HTML

<form class="ac-custom ac-checkbox ac-cross" autocomplete="off">
<h2>您如何通過即插即用網(wǎng)絡(luò)協(xié)同管理授權(quán)市場？</h2>
<ul>
  <li><input id="cb1" name="cb1" type="checkbox"><label for="cb1">有效釋放信息</label></li>
  <li><input id="cb2" name="cb2" type="checkbox"><label for="cb2">快速最大化及時交付成果</label></li>
  <li><input id="cb3" name="cb3" type="checkbox"><label for="cb3">顯著維護(hù)解決方案</label></li>
  <li><input id="cb4" name="cb4" type="checkbox"><label for="cb4">完全協(xié)同關(guān)系</label></li>
  <li><input id="cb5" name="cb5" type="checkbox"><label for="cb5">專業(yè)培養(yǎng)客戶服務(wù)</label></li>
</ul>
</form>

form元素使用了三個樣式類：ac-custom、ac-checkbox、ac-cross，li列表樣式類是checkbox。

CSS

/* 組件樣式 */
*,
*:after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ac-custom {
  padding: 0 3em;
  max-width: 900px;
  margin: 0 auto;
}

.ac-custom h2 {
  font-size: 3em;
  font-weight: 300;
  padding: 0 0 0.5em;
  margin: 0 0 30px;
}

.ac-custom ul,
.ac-custom ol {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
}

.ac-custom li {
  margin: 0 auto;
  padding: 2em 0;
  position: relative;
}

.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.5);
  cursor: pointer;
  -webkit-transition: color 0.3s;
  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;
  -webkit-appearance: none;
  display: inline-block;
  vertical-align: middle;
  z-index: 100;
}

.ac-custom label::before {
  content: '';
  border: 4px solid #fff;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.ac-radio label::before {
  border-radius: 50%;
}

.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;
}

/* SVG 樣式 */

.ac-custom svg {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  margin-top: -20px;
  left: 5px;
  pointer-events: none;
}

.ac-custom svg path {
  stroke: #fdfcd3;
  stroke-width: 13px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

解釋

我們可以通過CSS修改checkbox或radio的大小。

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
  width: 50px; /* 修改checkbox或radio的大小(寬) */
  height: 50px; /* 修改checkbox或radio的大小(高) */
  top: 50%; /* 調(diào)整checkbox或radio的位置 */
  left: 0; /* 調(diào)整checkbox或radio的位置 */
  margin-top: -25px;
  position: absolute;
  cursor: pointer;
}

可以通過CSS修改SVG動畫大小、位置。

.ac-custom svg {
  position: absolute;
  width: 40px; /* 修改SVG動畫的大小(寬) */
  height: 40px; /* 修改SVG動畫的大小(高) */
  top: 50%; /* 修改SVG動畫的位置 */
  margin-top: -20px;
  left: 5px;
  pointer-events: none;
}

通過CSS修改SVG顏色和寬度

.ac-custom svg path {
  stroke: #fdfcd3; /* 修改SVG動畫顏色 */
  stroke-width: 13px; /* 修改SVG線條寬度 */
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

Javascript

該SVG動畫設(shè)計用到了jQuery，所以需要引用jQuery庫文件。

<script src='jquery-3.2.1.min.js'></script>

實現(xiàn)代碼

<script src='jquery-3.2.1.min.js'></script>
<script>
if (document.createElement('svg').getAttributeNS)
{
  var checkbxsCross = Array.prototype.slice.call(document.querySelectorAll('form.ac-cross input[type="checkbox"]')),
    pathDefs = {
      cross: ['M 10 10 L 90 90', 'M 90 10 L 10 90']
    },
    animDefs = {
      cross:
      {
        speed: .2,
        easing: 'ease-in-out'
      }
    };

  function createSVGEl(def)
  {
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    if (def)
    {
      svg.setAttributeNS(null, 'viewBox', def.viewBox);
      svg.setAttributeNS(null, 'preserveAspectRatio', def.preserveAspectRatio);
    }
    else
    {
      svg.setAttributeNS(null, 'viewBox', '0 0 100 100');
    }
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    return svg;
  }

  function controlCheckbox(el, type, svgDef)
  {
    var svg = createSVGEl(svgDef);
    el.parentNode.appendChild(svg);
    el.addEventListener('change', function()
    {
      if (el.checked)
      {
        draw(el, type);
      }
      else
      {
        reset(el);
      }
    });
  }
  checkbxsCross.forEach(function(el, i)
  {
    controlCheckbox(el, 'cross');
  });

  function draw(el, type)
  {
    var paths = [],
      pathDef,
      animDef,
      svg = el.parentNode.querySelector('svg');
    switch (type)
    {
      case 'cross':
        pathDef = pathDefs.cross;
        animDef = animDefs.cross;
        break;
    };
    paths.push(document.createElementNS('http://www.w3.org/2000/svg', 'path'));
    if (type === 'cross')
    {
      paths.push(document.createElementNS('http://www.w3.org/2000/svg', 'path'));
    }
    for (var i = 0, len = paths.length; i < len; ++i)
    {
      var path = paths[i];
      svg.appendChild(path);
      path.setAttributeNS(null, 'd', pathDef[i]);
      var length = path.getTotalLength();
      // 清除前面的任何轉(zhuǎn)換
      // path.style.transition = path.style.WebkitTransition = path.style.MozTransition = 'none';
      // 設(shè)置開始位置
      path.style.strokeDasharray = length + ' ' + length;
      if (i === 0)
      {
        path.style.strokeDashoffset = Math.floor(length) - 1;
      }
      else path.style.strokeDashoffset = length;
      // 觸發(fā)布局，以便在瀏覽器中計算樣式
      // 設(shè)置動畫前拾取起始位置
      path.getBoundingClientRect();
      // 定義我們的過渡
      path.style.transition = path.style.WebkitTransition = path.style.MozTransition = 'stroke-dashoffset ' + animDef.speed + 's ' + animDef.easing + ' ' + i * animDef.speed + 's';
      // 開始
      path.style.strokeDashoffset = '0';
    }
  }

  function reset(el)
  {
    Array.prototype.slice.call(el.parentNode.querySelectorAll('svg > path')).forEach(function(el)
    {
      el.parentNode.removeChild(el);
    });
  }
}
</script>

用類似的方法和代碼，可以設(shè)計出很多不同的SVG動畫checkbox多選框和radio單選框按鈕。

2、填充radio

demodownload

3、打勾checkbox

demodownload

4、畫圓radio

demodownload

5、填充checkbox

demodownload

6、旋渦radio

demodownload

7、對角線checkbox

demodownload

8、劃線列舉

demodownload

總結(jié)

本文介紹了8款SVG創(chuàng)建的動畫checkbox多選框和radio單選框，讓你的網(wǎng)頁設(shè)計更具個性。

相關(guān)文章

• 純CSS：兩個非常漂亮的checkbox和radio按鈕樣式
• 使用SVG實現(xiàn)的漂亮的復(fù)選框（checkbox）樣式
• 兩例純CSS樣式：單選radio/復(fù)選checkbox按鈕
• 純CSS創(chuàng)建自定義復(fù)選框Checkbox
• css實現(xiàn)漂亮的checkbox多選框和radio單選按鈕
• 如何僅使用HTML和CSS創(chuàng)建自定義單選框radio
• 簡單又好看的CSS單選按鈕(radio)樣式
• 純css3實現(xiàn)漂亮的單選按鈕radio

標(biāo)簽: checkbox  radio  SVG  css