CSS 3D开关切换(switch)按钮

技术频道 - html技术

作者:admin 时间:2023-4-12 16:17:57 浏览:

switch切换开关非常常见，应用非常广泛，在不久前介绍过漂亮的开关（switch）按钮，不过那是扁平的样式：

漂亮的CSS蓝色单选框radio、复选框checkbox和开关switch按钮

在本文中，将介绍一个CSS实现的3D开关（switch）按钮。

效果如图

CSS 3D开关切换(switch)按钮

demo download

实例介绍

CSS实现的圆角按钮，当关闭状态时，是扁平的样式，当切换到打开状态时，则以3D立体的形式显示。

HTML代码

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

开关（switch）按钮容器为一个label标签，内部有一个input标签、一个div标签和一个span标签。

当input标签chechek属性为true时，开关呈打开状态。

div是开关图形画布(canvas)的容器。

span是按钮文字标签。

CSS代码

.switch是设置开关按钮容器的样式。

.switch是设置开关按钮容器的样式

.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设置圆角按钮样式。3D样式还需满足input[type=checkbox]这个条件，即是input标签的checked属性为true时。

div设置圆角按钮样式

.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是设置3D图形样式。

div canvas是设置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');

});