卡卡網(wǎng)

本文介紹一個(gè)漂亮的CSS實(shí)現(xiàn)的藍(lán)色單選框（radio）、復(fù)選框（checkbox）和開關(guān)（switch）按鈕。

demodownload

實(shí)例簡(jiǎn)介

本實(shí)例使用CSS+SVG+Javascript來實(shí)現(xiàn)，效果非常不錯(cuò)，藍(lán)色樣式很漂亮。

HTML代碼

html代碼中，單選框（radio）、復(fù)選框（checkbox）和開關(guān)按鈕（switch）有很多共用及相同之處，這里以單選框（radio）為例。

單選框（radio）html代碼

<label class="radio">
  <input type="radio" name="r" value="1" checked />
  <svg viewBox="0 0 24 24" filter="url(#goo-light)">
    <circle class="top" cx="12" cy="-12" r="8" />
    <circle class="dot" cx="12" cy="12" r="5" />
    <circle class="drop" cx="12" cy="12" r="2" />
  </svg>
</label>
<label class="radio">
  <input type="radio" name="r" value="2" />
  <svg viewBox="0 0 24 24" filter="url(#goo-light)">
    <circle class="top" cx="12" cy="-12" r="8" />
    <circle class="dot" cx="12" cy="12" r="5" />
    <circle class="drop" cx="12" cy="12" r="2" />
  </svg>
</label>

HTML代碼結(jié)構(gòu)有兩個(gè)label標(biāo)簽，第一個(gè)label是選中狀態(tài)，第二個(gè)label是非選中狀態(tài)。復(fù)選框、開關(guān)按鈕的HTML代碼結(jié)構(gòu)也是一樣。

label代碼里包含一個(gè)input標(biāo)簽，和一個(gè)svg標(biāo)簽。兩個(gè)label里的svg標(biāo)簽代碼是一樣的，不同的是兩個(gè)input標(biāo)簽的值，選中是1，value="1"，非選中是2，value="2"。

代碼里我們看到svg的filter屬性值，filter="url(#goo-light)"，這個(gè)值（#goo-light）的內(nèi)容可以在svg代碼里找到，如下標(biāo)記：

<svg width="0" height="0">
    <defs>
        <filter id="goo" x="-50%" width="200%" y="-50%" height="200%" color-interpolation-filters="sRGB">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7" result="cm" />
        </filter>
        <filter id="goo-light" x="-50%" width="200%" y="-50%" height="200%" color-interpolation-filters="sRGB">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1.25" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7" result="cm" />
        </filter>
        <filter id="goo-big" x="-50%" width="200%" y="-50%" height="200%" color-interpolation-filters="sRGB">
            <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7" result="cm" />
        </filter>
    </defs>
</svg>

以上便是單選框（radio）的HTML代碼結(jié)構(gòu)，但是這樣的HTML+SVG代碼是不能構(gòu)造出一個(gè)單選框的，這就需要用到強(qiáng)大的CSS樣式了，主要CSS代碼如下：

:root {
  --c-active: #275EFE;
  --c-active-inner: #FFFFFF;
  --c-default: #D2D6E9;
  --c-default-dark: #C7CBDF;
  --c-black: #1B1B22;
}

.radio {
  display: table;
  border-radius: var(--border-radius, 12px) var(--border-radius-corner, 12px) var(--border-radius, 12px) var(--border-radius, 12px);
  position: relative;
}
.radio input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  border: none;
  background: var(--input-background, none);
  display: block;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border-radius: inherit;
  width: var(--input-width, 24px);
  height: var(--input-height, 24px);
}
.radio svg {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  pointer-events: none;
  fill: var(--c-active-inner);
  transform: scale(1.01) translateZ(0);
}

.radio input {
  --border-color: var(--c-default);
  --border-width: 2px;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
}
.radio input:checked {
  --border-color: var(--c-active);
}
.radio input:not(:checked) {
  transition: box-shadow 0.25s;
}
.radio input:not(:checked):hover {
  --border-width: 3px;
  --border-color: var(--c-active);
}

.radio input:checked {
  --border-width: 6.75px;
}
.radio input + svg {
  --top-y: 0;
  --dot-y: -17px;
  --drop-y: -14px;
  --top-s-x: 1.75;
  --top-s-y: 1;
}
.radio input + svg .top {
  transform-origin: 12px -12px;
  transform: translateY(var(--top-y)) scale(var(--top-s-x), var(--top-s-y)) translateZ(0);
}
.radio input + svg .dot {
  transform: translateY(var(--dot-y)) translateZ(0);
}
.radio input + svg .drop {
  transform: translateY(var(--drop-y)) translateZ(0);
}

樣式代碼較為復(fù)雜，用到大量的transform屬性。

本實(shí)例中，還包含了多選框（checkbox）和開關(guān)按鈕（switch），它們的設(shè)計(jì)代碼跟單選框（radio）大同小異。

Javascript代碼

本實(shí)例還包含了Javascript代碼，其實(shí)Javascript代碼可有可無，Javascript代碼主要是用來實(shí)現(xiàn)好看的點(diǎn)擊按鈕的過渡效果。

首先需要引用一個(gè)JS庫(kù)文件：gsap.min.js，該文件在源碼壓縮包里。

<script src='gsap.min.js'></script>

單選框（radio）的JS代碼如下：

const { to, set, from, fromTo } = gsap;

const getVar = (key, elem = document.documentElement) => getComputedStyle(elem).getPropertyValue(key);

document.querySelectorAll('.radio').forEach(elem => {
  let svg = elem.querySelector('svg'),
  input = elem.querySelector('input');
  input.addEventListener('change', e => {
    fromTo(input, {
      '--border-width': '3px' },
    {
      '--border-color': getVar('--c-active'),
      '--border-width': '12px',
      duration: .2 });

    to(svg, {
      keyframes: [{
        '--top-y': '6px',
        '--top-s-x': 1,
        '--top-s-y': 1.25,
        duration: .2,
        delay: .2 },
      {
        '--top-y': '0px',
        '--top-s-x': 1.75,
        '--top-s-y': 1,
        duration: .6 }] });


    to(svg, {
      keyframes: [{
        '--dot-y': '2px',
        duration: .3,
        delay: .2 },
      {
        '--dot-y': '0px',
        duration: .3 }] });


    to(svg, {
      '--drop-y': '0px',
      duration: .6,
      delay: .4,
      clearProps: true,
      onComplete() {
        input.removeAttribute('style');
      } });

  });
});

總結(jié)

本文介紹了CSS實(shí)現(xiàn)漂亮的藍(lán)色單選框、復(fù)選框和開關(guān)按鈕，確切來說，是CSS+SVG+JavaScript來實(shí)現(xiàn)的按鈕，但是要知道的是，JavaScript代碼只是用來實(shí)現(xiàn)好看的過渡效果，而非必要代碼。

相關(guān)文章

• 8款SVG創(chuàng)建的動(dòng)畫checkbox多選框和radio單選框
• 純CSS：兩個(gè)非常漂亮的checkbox和radio按鈕樣式
• 兩例純CSS樣式：?jiǎn)芜xradio/復(fù)選checkbox按鈕
• 如何僅使用HTML和CSS創(chuàng)建自定義單選框radio
• 簡(jiǎn)單又好看的CSS單選按鈕(radio)樣式
• 純css3實(shí)現(xiàn)漂亮的單選按鈕radio
• css實(shí)現(xiàn)漂亮的checkbox多選框和radio單選按鈕

• 純CSS+SVG創(chuàng)建有趣的動(dòng)畫復(fù)選框checkbox
• 一個(gè)具有鼠標(biāo)懸停動(dòng)畫效果的SVG復(fù)選框checkbox
• 使用SVG實(shí)現(xiàn)的漂亮的復(fù)選框（checkbox）樣式
• 兩例純CSS樣式：?jiǎn)芜xradio/復(fù)選checkbox按鈕
• 純CSS創(chuàng)建自定義復(fù)選框Checkbox

• CSS示例：漂亮的切換開關(guān)（toggle switches）樣式

標(biāo)簽: radio  checkbox  UISwitch  單選框  復(fù)選框  切換開關(guān)  開關(guān)按鈕