3D开关动画

下载代码

html

css

分享到微信朋友圈

html

css

.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;
}
.switch input[type="checkbox"] {
  display: none;
}
.switch input[type="checkbox"] + div {
  width: 40px;
  height: 24px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease;
  background: var(--background);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.switch input[type="checkbox"] + div:before,
.switch input[type="checkbox"] + div canvas {
  left: 0;
  top: 0;
  display: block;
  position: absolute;
  transition: -webkit-transform .5s ease, -webkit-filter .5s ease;
  transition: transform .5s ease, filter .5s ease;
  transition: transform .5s ease, filter .5s ease, -webkit-transform .5s ease, -webkit-filter .5s ease;
}
.switch input[type="checkbox"] + div:before {
  --x: -100%;
  --s: 1;
  content: '';
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--background-active);
  -webkit-transform: translateX(var(--x)) scale(var(--s));
          transform: translateX(var(--x)) scale(var(--s));
}
.switch input[type="checkbox"] + div canvas {
  --x: -8px;
  display: block;
  -webkit-filter: drop-shadow(0 1px 2px var(--shadow));
          filter: drop-shadow(0 1px 2px var(--shadow));
  -webkit-transform: translate(var(--x), -8px);
          transform: translate(var(--x), -8px);
}
.switch input[type="checkbox"]:checked + div:before {
  --s: 3;
  --x: 0;
}
.switch input[type="checkbox"]:checked + div canvas {
  --x: 8px;
  -webkit-filter: drop-shadow(0 1px 2px var(--shadow-dark));
          filter: drop-shadow(0 1px 2px var(--shadow-dark));
}
.switch:active input[type="checkbox"] + div {
  -webkit-transform: scale(0.92);
          transform: scale(0.92);
}
.switch span {
  line-height: 24px;
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin: 0 0 0 8px;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #191919;
  font-family: 'Roboto', Arial;
  color: #6C7486;
}
body .switch:not(:last-child) {
  margin-bottom: 16px;
}

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');

});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg