|
|
|
|
|
switch切換開(kāi)關(guān)非常常見(jiàn),應(yīng)用非常廣泛,在不久前介紹過(guò)漂亮的開(kāi)關(guān)(switch)按鈕,不過(guò)那是扁平的樣式:
在本文中,將介紹一個(gè)CSS實(shí)現(xiàn)的3D開(kāi)關(guān)(switch)按鈕。
效果如圖
實(shí)例介紹
CSS實(shí)現(xiàn)的圓角按鈕,當(dāng)關(guān)閉狀態(tài)時(shí),是扁平的樣式,當(dāng)切換到打開(kāi)狀態(tài)時(shí),則以3D立體的形式顯示。
HTML代碼
<label class="switch">
<input type="checkbox" checked>
<div>
<canvas></canvas>
</div>
<span>Switch</span>
</label>
開(kāi)關(guān)(switch)按鈕容器為一個(gè)label
標(biāo)簽,內(nèi)部有一個(gè)input
標(biāo)簽、一個(gè)div
標(biāo)簽和一個(gè)span
標(biāo)簽。
當(dāng)input
標(biāo)簽chechek屬性為true時(shí),開(kāi)關(guān)呈打開(kāi)狀態(tài)。
div
是開(kāi)關(guān)圖形畫(huà)布(canvas)的容器。
span
是按鈕文字標(biāo)簽。
CSS代碼
.switch
是設(shè)置開(kāi)關(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]
這個(gè)條件,即是input
標(biāo)簽的checked屬性為true時(shí)。
.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
本實(shí)例需用到JavaScript編程,并且需要引用兩個(gè)第三方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é)
本文介紹了一個(gè)CSS 3D開(kāi)關(guān)切換(switch)按鈕,它比大眾化的扁平切換開(kāi)關(guān)(switch)按鈕更突出,如果你追求個(gè)性,那么本實(shí)例的3D效果或許你會(huì)喜歡,你可以直接下載源碼使用它。
相關(guān)文章