卡卡網(wǎng)

switch切換開關(guān)非常常見，應(yīng)用非常廣泛，在不久前介紹過漂亮的開關(guān)（switch）按鈕，不過那是扁平的樣式：

• 漂亮的CSS藍(lán)色單選框radio、復(fù)選框checkbox和開關(guān)switch按鈕

在本文中，將介紹一個CSS實現(xiàn)的3D開關(guān)（switch）按鈕。

效果如圖

demodownload

實例介紹

CSS實現(xiàn)的圓角按鈕，當(dāng)關(guān)閉狀態(tài)時，是扁平的樣式，當(dāng)切換到打開狀態(tài)時，則以3D立體的形式顯示。

HTML代碼

<label class="switch">
    <input type="checkbox" checked>
    <div>
        <canvas></canvas>
    </div>
    <span>Switch</span>
</label>

開關(guān)（switch）按鈕容器為一個label標(biāo)簽，內(nèi)部有一個input標(biāo)簽、一個div標(biāo)簽和一個span標(biāo)簽。

當(dāng)input標(biāo)簽chechek屬性為true時，開關(guān)呈打開狀態(tài)。

div是開關(guān)圖形畫布(canvas)的容器。

span是按鈕文字標(biāo)簽。

CSS代碼

.switch是設(shè)置開關(guān)按鈕容器的樣式。

.switch {
  --background: #E4ECFA;
  --background-active: #275EFE;
  --shadow: rgba(18, 22, 33, .04);
  --shadow-dark: rgba(18, 22, 33, .32);
  cursor: pointer;
  display: flex;
  -webkit-tap-highlight-color: transparent;
  zoom: 1.5;
}

div設(shè)置圓角按鈕樣式。3D樣式還需滿足input[type=checkbox]這個條件，即是input標(biāo)簽的checked屬性為true時。

.switch input[type=checkbox] + div {
  width: 40px;
  height: 24px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
  background: var(--background);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.switch input[type=checkbox] + div:before {
  left: 0;
  top: 0;
  display: block;
  position: absolute;
  transition: transform 0.5s ease, filter 0.5s ease;
}
.switch input[type=checkbox] + div:before {
  --x: -100%;
  --s: 1;
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--background-active);
  transform: translateX(var(--x)) scale(var(--s));
}

div canvas是設(shè)置3D圖形樣式。

.switch input[type=checkbox] + div canvas {
  left: 0;
  top: 0;
  display: block;
  position: absolute;
  transition: transform 0.5s ease, filter 0.5s ease;
}
.switch input[type=checkbox] + div canvas {
  --x: -8px;
  display: block;
  filter: drop-shadow(0 1px 2px var(--shadow));
  transform: translate(var(--x), -8px);
}
.switch input[type=checkbox]:checked + div canvas {
  --x: 8px;
  filter: drop-shadow(0 1px 2px var(--shadow-dark));
}

JavaScript

本實例需用到JavaScript編程，并且需要引用兩個第三方JS插件：three.min.js和TweenMax.min.js。

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

完整JavaScript代碼

$('.switch').each(function () {

  let toggle = $(this),
  input = toggle.children('input'),
  $canvas = toggle.find('canvas'),
  canvas = $canvas[0],
  renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    context: canvas.getContext('webgl2'),
    antialias: true,
    alpha: true });


  renderer.setSize(40, 40);
  renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio * 2 : 2);

  renderer.shadowMap.enabled = true;

  let scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, $canvas.width() / $canvas.height(), 0.1, 1000);

  camera.position.z = 92;

  let shape = new THREE.CylinderGeometry(16, 16, 8, 20);
  let material = new THREE.MeshPhongMaterial({
    color: 0xE4ECFA,
    shininess: 20,
    opacity: .96,
    transparent: true });

  let donut = new THREE.Mesh(shape, material);

  scene.add(donut);

  let lightTop = new THREE.DirectionalLight(0xFFFFFF, .6);
  lightTop.position.set(0, 60, 60);
  lightTop.castShadow = true;
  scene.add(lightTop);

  let right = new THREE.DirectionalLight(0xFFFFFF, .5);
  right.position.set(20, 20, 40);
  right.castShadow = true;
  scene.add(right);

  let left = new THREE.DirectionalLight(0xFFFFFF, .5);
  left.position.set(-20, 20, 40);
  left.castShadow = true;
  scene.add(left);

  let active = new THREE.DirectionalLight(0x275EFE, .8);
  active.position.set(0, -80, 20);
  active.castShadow = true;
  scene.add(active);

  scene.add(new THREE.AmbientLight(0x6C7486));

  var render = function () {

    requestAnimationFrame(render);

    TweenMax.render();

    renderer.render(scene, camera);

  };

  render();

  input.on('change', e => {
    let checked = input.is(':checked'),
    z = !checked ? THREE.Math.degToRad(0) : THREE.Math.degToRad(90),
    x = !checked ? THREE.Math.degToRad(90) : THREE.Math.degToRad(0);
    TweenMax.to(donut.rotation, 3, {
      ease: Elastic.easeOut.config(!checked ? 1.16 : 1.04, !checked ? .32 : .36),
      z: z,
      x: x });

    active.intensity = !checked ? .4 : .8;
    active.color.setHex(!checked ? 0xFFFFFF : 0x275EFE);
  }).trigger('change');

});

總結(jié)

本文介紹了一個CSS 3D開關(guān)切換(switch)按鈕，它比大眾化的扁平切換開關(guān)(switch)按鈕更突出，如果你追求個性，那么本實例的3D效果或許你會喜歡，你可以直接下載源碼使用它。

相關(guān)文章

• 純CSS實現(xiàn)移動網(wǎng)頁導(dǎo)航打開/關(guān)閉切換按鈕動畫
• 漂亮的CSS藍(lán)色單選框radio、復(fù)選框checkbox和開關(guān)switch按鈕
• 漂亮的純CSS3開關(guān)按鈕 (UISwitch)

標(biāo)簽: 3D按鈕  開關(guān)按鈕  切換開關(guān)  toggle-switch  UISwitch