css实现checkbox软绵胶囊开关切换效果代码-html代码-BFW代码库

css实现checkbox软绵胶囊开关切换效果代码

代码语言：html

代码描述：css实现checkbox软绵胶囊开关切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
.squishy-toggle {
  --height: 7rem;
  --thumb-height: calc(var(--height) * 0.8 );
  --width: calc( var(--height) * 1.8 );
  --padding: calc( var(--height) * 0.1 );
  --bg: #9fa19f;
  --checked-bg: #5400f3;
  --bs: inset 0 calc( var(--height) * 0.05 ) calc( var(--height) * 0.05 ) rgba(255, 255, 255, 0.25), inset 0 calc( var(--height) * -0.05 ) calc( var(--height) * 0.05 ) rgba(0,0,0, 0.15), 0 calc( var(--height) * 0.1 ) calc( var(--height) * 0.2 ) rgba(0,0,0, 0.1);
  --default-bs: var(--bs), calc(var(--height) * -3) 0 0 calc(var(--height) * 0.75) var(--checked-bg);
  --checked-bs: var(--bs), calc(var(--height) * -0.5) 0 0 calc(var(--height) * 0.75) var(--checked-bg);
  --active-bs: var(--bs), calc(var(--height) * 0.25) 0 0 calc(var(--height) * 0.75) var(--checked-bg);
  --easing: cubic-bezier(0.5, 0.5, 0.3, 1.2);
  --duration: 0.3s;
  position: relative;
  display: inline-flex;
  height: var(--height);
  width: var(--width);
  border-radius: var(--height);
  background: var(--bg);
  box-shadow: inset 0 calc( var(--height) * 0.04 ) calc( var(--height) * 0.08 ) rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}
.squishy-toggle:before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--width) - var(--padding) - var(--thumb-height));
  transform: translatey(-50%);
  height: var(--thumb-height);
  width: var(--thumb-height);
  background: linear-gradient(#FFFFFF, #D7D7D7);
  border.........完整代码请登录后点击上方下载按钮下载查看