物理电器实体开关效果代码-html代码-BFW代码库

代码语言：html
代码描述：物理电器实体开关效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  height: 100vh;
  background:  radial-gradient(90% 100% at 50% 50%, #2c2c44 10%, #0e0e16 80%);
}

.switch-pad {
  padding: 2.75vmin 2.5vmin;
  border-radius: 2vmin;
  position: relative;
  box-shadow: inset 0 0.5vmin 1px -0.25vmin #404063, inset 0.5625vmin 0 2px -0.25vmin black, inset -0.375vmin 0 2px -0.25vmin black, -0.3213910127vmin 0.3830336698vmin 0.5px rgba(4, 4, 6, 0.045), -0.6427820254vmin 0.7660673397vmin 1px rgba(4, 4, 6, 0.04), -0.9641730381vmin 1.1491010095vmin 1.5px rgba(4, 4, 6, 0.035), -1.2855640508vmin 1.5321346793vmin 2px rgba(4, 4, 6, 0.03), -1.6069550636vmin 1.9151683491vmin 2.5px rgba(4, 4, 6, 0.025), -1.9283460763vmin 2.298202019vmin 3px rgba(4, 4, 6, 0.02), -2.249737089vmin 2.6812356888vmin 3.5px rgba(4, 4, 6, 0.015), -2.5711281017vmin 3.0642693586vmin 4px rgba(4, 4, 6, 0.01), -2.8925191144vmin 3.4473030285vmin 4.5px rgba(4, 4, 6, 0.005), -3.2139101271vmin 3.8303366983vmin 5px rgba(4, 4, 6, 0), 0.3213910127vmin 0.3830336698vmin 0.5px rgba(4, 4, 6, 0.045), 0.6427820254vmin 0.7660673397vmin 1px rgba(4, 4, 6, 0.04), 0.9641730381vmin 1.1491010095vmin 1.5px rgba(4, 4, 6, 0.035), 1.2855640508vmin 1.5321346793vmin 2px rgba(4, 4, 6, 0.03), 1.6069550636vmin 1.9151683491vmin 2.5px rgba(4, 4, 6, 0.025), 1.9283460763vmin 2.298202019vmin 3px rgba(4, 4, 6, 0.02), 2.249737089vmin 2.6812356888vmin 3.5px rgba(4, 4, 6, 0.015), 2.5711281017vmin 3.0642693586vmin 4px rgba(4, 4, 6, 0.01), 2.8925191144vmin 3.4473030285vmin 4.5px rgba(4, 4, 6, 0.005), 3.2139101271vmin 3.8303366983vmin 5px rgba(4, 4, 6, 0), 0vmin 0.5vmin 0.5px rgba(4, 4, 6, 0.0225), 0vmin 1vmin 1px rgba(4, 4, 6, 0.02), 0vmin 1.5vmin 1.5px rgba(4, 4, 6, 0.0175), 0vmin 2vmin 2px rgba(4, 4, 6, 0.015), 0vmin 2.5vmin 2.5px rgba(4, 4, 6, 0.0125), 0vmin 3vmin 3px rgba(4, 4, 6, 0.01), 0vmin 3.5vmin 3.5px rgba(4, 4, 6, 0.0075), 0vmin 4vmin 4px rgba(4, 4, 6, 0.005), 0vmin 4.5vmin 4.5px rgba(4, 4, 6, 0.0025), 0vmin 5vmin 5px rgba(4, 4, 6, 0);
  background-color: #181825;
}
.switch-pad:before {
  content: '';
  position: absolute;
  top: 2.475vmin;
  right: 2.475vmin;
  bottom: 2.475vmin;
  left: 2.475vmin;
  border-radius: 1vmin;
  background: radial-gradient(60% 3% at 50% 0%, rgba(255, 0, 21, 0.33), rgba(255, 0, 21, 0)), radial-gradient(5% 30% at 1% 55%, rgba(255, 0, 21, 0.66), rgba(255, 0, 21, 0)), radial-gradient(5% 40% at 99% 55%, rgba(255, 0, 21, 0.66), rgba(255, 0, 21, 0));
  box-shadow: inset 0 -0.625vmin 2px -0.25vmin #222235;
  background-color: black;
}

.switch-pad__rocker {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  width: 20vmin;
  height: 46.6vmin;
  cursor: pointer;
  z-index: 1;
  overflow: hidden;
}
.switch-pad__rocker:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-filter: contrast(120%);
          filter: contrast(120%);
  z-index: -1;
  background:  -webkit-gradient(linear, left top, right top, color-stop(3%, rgba(255, 51, 68, 0)), color-stop(17.5%, rgba(255, 102, 115, 0.33)), color-stop(82.5%, rgba(255, 102, 115, 0.33)), color-stop(97%, rgba(255, 51, 68, 0))) no-repeat center 6.165vmin / 92.5% 0.3vmin, radial-gradient(50% 20% at 50% 50%, rgba(255, 153, 162, 0.15), rgba(255, 153, 162, 0.25) 15%, rgba(102, 0, 9, 0.1) 60%, rgba(255, 0, 21, 0)), radial-gradient(100% 1% at 50% 2%, rgba(255, 204, 208, 0.25), rgba(255, 0, 21, 0) 60%), radial-gradient(45% 20% at 50% 8.1vmin, #b31e00, rgba(255, 0, 21, 0)), radial-gradient(2% 40% at 6% 45%, #e60a00, rgba(255, 0, 21, 0)), radial-gradient(2% 50% at 94% 45%, #e60a00, rgba(255, 0, 21, 0)), -webkit-gradient(linear, left top, right top, color-stop(3%, rgba(255, 153, 162, 0.25)), color-stop(7.5%, rgba(255, 204, 208, 0.33)), color-stop(92.5%, rgba(255, 204, 208, 0.33)), color-stop(97%, rgba(255, 153, 162, 0.25))) no-repeat center calc(100% - 4.5%) / 92.5% 0.4vmin, -webkit-gradient(linear, left bottom, left top, color-stop(3%, rgba(255, 153, 162, 0)), color-stop(97%, rgba(255, 153, 162, 0.5))) no-repeat center calc(100% - 3.15%) / 92.5% 0.5vmin, radial-gradient(10% 1% at 50% 50%, rgba(230, 0, 19, 0) 3%, rgba(255, 0, 21, 0.1) 40%, #ff0015 90%, rgba(230, 0, 19, 0.15) 97%) no-repeat top/100% 0.5vmin;
  background: linear-gradient(to right, rgba(255, 51, 68, 0) 3%, rgba(255, 102, 115, 0.33) 17.5%, rgba(255, 102, 115, 0.33) 82.5%, rgba(255, 51, 68, 0) 97%) no-repeat center 6.165vmin / 92.5% 0.3vmin, radial-gradient(50% 20% at 50% 50%, rgba(255, 153, 162, 0.15), rgba(255, 153, 162, 0.25) 15%, rgba(102, 0, 9, 0.1) 60%, rgba(255, 0, 21, 0)), radial-gradient(100% 1% at 50% 2%, rgba(255, 204, 208, 0.25), rgba(255, 0, 21, 0) 60%), radial-gradient(45% 20% at 50% 8.1vmin, #b31e00, rgba(255, 0, 21, 0)), radial-gradient(2% 40% at 6% 45%, #e60a00, rgba(255, 0, 21, 0)), radial-gradient(2% 50% at 94% 45%, #e60a00, rgba(255, 0, 21, 0)), linear-gradient(to right, rgba(255, 153, 162, 0.25) 3%, rgba(255, 204, 208, 0.33) 7.5%, rgba(255, 204, 208, 0.33) 92.5%, rgba(255, 153, 162, 0.25) 97%) no-repeat center calc(100% - 4.5%) / 92.5% 0.4vmin, linear-gradient(to top, rgba(255, 153, 162, 0) 3%, rgba(255, 153, 162, 0.5) 97%) no-repeat center calc(100% - 3.15%) / 92.5% 0.5vmin, radial-gradient(10% 1% at 50% 50%, rgba(230, 0, 19, 0) 3%, rgba(255, 0, 21, 0.1) 40%, #ff0015 90%, rgba(230, 0, 19, 0.15) 97%) no-repeat top/100% 0.5vmin;
  background-color: #4d0006;
  border-radius: 0.4vmin;
  box-shadow: inset 0 8px 7px -5px rgba(26, 0, 2, 0.75), inset 0 -8px 7px -5px rgba(26, 0, 2, 0.75);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-transition: 0.3s cubic-bezier(0.51, 0, 0.06, 1), -webkit-transform 0.2s cubic-bezier(0.8, 0, 0.5, 1);
  transition: 0.3s cubic-bezier(0.51, 0, 0.06, 1), -webkit-transform 0.2s cubic-bezier(0.8, 0, 0.5, 1);
  transition: transform 0.2s cubic-bezier(0.8, 0, 0.5, 1), 0.3s cubic-bezier(0.51, 0, 0.06, 1);
  transition: transform 0.2s cubic-bezier(0.8, 0, 0.5, 1), 0.3s cubic-bezier(0.51, 0, 0.06, 1), -webkit-transform 0.2s cubic-bezier(0.8, 0, 0.5, 1);
}
.switch-pad__rocker:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-filter: contrast(120%);
          filter: contrast(120%);
  z-index: -1;
  opacity: 0;
  background: radial-gradient(130% 50% at 50% 47.5%, #ff6673, rgba(255, 0, 21, 0)), radial-gradient(60% 25% at 50% 68%, #ff2b00, rgba(255, 0, 21, 0)), radial-gradient(50% 40% at 50% 55%, #ff0015, rgba(255, 0, 21, 0)), radial-gradient(45% 1% at 50% calc(100% - 8.1vmin), #ff8066, rgba(255, 0, 21, 0)), radial-gradient(80% 1% at 50% 98%, rgba(255, 0, 21, 0.25), rgba(255, 0, 21, 0) 60%), radial-gradient(4% 50% at 1% 55%, #ff8066, rgba(255, 0, 21, 0)), radial-gradient(2% 40% at 6% 55%, #ff401a, rgba(255, 0, 21, 0)), radial-gradient(5% 40% at 99% 55%, #ffa666, rgba(255, 0, 21, 0)), radial-gradient(2% 50% at 94% 55%, #ff401a, rgba(255, 0, 21, 0)), -webkit-gradient(linear, left top, right top, color-stop(3%, rgba(255, 153, 162, 0.5)), color-stop(7.5%, rgba(255, 204, 208, 0.66)), color-stop(92.5%, rgba(255, 204, 208, 0.66)), color-stop(97%, rgba(255, 153, 162, 0.5))) no-repeat center 4.5% / 92.5% 0.4vmin, -webkit-gradient(linear, left top, left bottom, color-stop(3%, rgba(255, 153, 162, 0)), color-stop(97%, rgba(255, 153, 162, 0.5))) no-repeat center 3.15% / 92.5% 0.5vmin, radial-gradient(50% 5% at 50% 3%, rgba(255, 153, 162, 0.75), rgba(255, 153, 162, 0)), radial-gradient(50% 10% at 50% 1%, #cc0011, rgba(255, 0, 21, 0) 80%), radial-gradient(30% 50% at 7.5% 15%, #4d0006, rgba(77, 0, 6, 0)), radial-gradient(30% 50% at 95% 15%, #4d0006, rgba(77, 0, 6, 0)), radial-gradient(100% 1% at 50% 99%, rgba(230, 0, 19, 0.75) 3%, rgba(255, 0, 21, 0.9) 40%, rgba(255, 0, 21, 0.9) 90%, rgba(230, 0, 19, 0.75) 97%) no-repeat bottom/100% 0.5vmin;
  background:  radial-gradient(130% 50% at 50% 47.5%, #ff6673, rgba(255, 0, 21, 0)), radial-gradient(60% 25% at 50% 68%, #ff2b00, rgba(255, 0, 21, 0)), radial-gradient(50% 40% at 50% 55%, #ff0015, rgba(255, 0, 21, 0)), radial-gradient(45% 1% at 50% calc(100% - 8.1vmin), #ff8066, rgba(255, 0, 21, 0)), radial-gradient(80% 1% at 50% 98%, rgba(255, 0, 21, 0.25), rgba(255, 0, 21, 0) 60%), radial-gradient(4% 50% at 1% 55%, #ff8066, rgba(255, 0, 21, 0)), radial-gradient(2% 40% at 6% 55%, #ff401a, rgba(255, 0, 21, 0)), radial-gradient(5% 40% at 99% 55%, #ffa666, rgba(255, 0, 21, 0)), radial-gradient(2% 50% at 94% 55%, #ff401a, rgba(255, 0, 21, 0)), linear-gradient(to right, rgba(255, 153, 162, 0.5) 3%, rgba(255, 204, 208, 0.66) 7.5%, rgba(255, 204, 208, 0.66) 92.5%, rgba(255, 153, 162, 0.5) 97%) no-repeat center 4.5% / 92.5% 0.4vmin, linear-gradient(to bottom, rgba(255, 153, 162, 0) 3%, rgba(255, 153, 162, 0.5) 97%) no-repeat center 3.15% / 92.5% 0.5vmin, radial-gradient(50% 5% at 50% 3%, rgba(255, 153, 162, 0.75), rgba(255, 153, 162, 0)), radial-gradient(50% 10% at 50% 1%, #cc0011, rgba(255, 0, 21, 0) 80%), radial-gradient(30% 50% at 7.5% 15%, #4d0006, rgba(77, 0, 6, 0)), radial-gradient(30% 50% at 95% 15%, #4d0006, rgba(77, 0, 6, 0)), radial-gradient(100% 1% at 50% 99%, rgba(230, 0, 19, 0.75) 3%, rgba(255, 0, 21, 0.9) 40%, rgba(255, 0, 21, 0.9) 90%, rgba(230, 0, 19, 0.75) 97%) no-repeat bottom/100% 0.5vmin;
  background-color: #660009;
  border-radius: 0.4vmin;
  box-shadow: inset 0 8px 7px -5px rgba(26, 0, 2, 0.75);
  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transform: translate3d(0, 9vmin, 0);
          transform: translate3d(0, 9vmin, 0);
  -webkit-transition: 0.3s cubic-bezier(0.51, 0, 0.06, 1), -webkit-transform 0.2s cubic-bezier(0.8, 0, 0.5, 1);
  transition: 0.3s cubic-bezier(0.51, 0, 0.06, 1), -webkit-transform 0.2s cubic-bezier(0.8, 0, 0.5, 1);
  transition: transform 0.2s cubic-bezier(0.8, 0, 0.5, 1), 0.3s cubic-bezier(0.51, 0, 0.06, 1);
  transition: transform 0.2s cubic-bezier(0.8, 0, 0.5, 1), 0.3s cubic-bezier(0.51, 0, 0.06, 1), -webkit-transform 0.2s cubic-bezier(0.8, 0, 0.5, 1);
}
.switch-pad__rocker-texture {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: calc(95% - 9vmin);
  border-radius: 0.3vmin;
  -webkit-transform: perspective(600px) rotateX(-5deg) translate3d(0, calc(-50% + 2.9032258065vmin), 0) scale3d(1, 1.05, 1);
          transform: perspective(600px) rotateX(-5deg) translate3d(0, calc(-50% + 2.9032258065vmin), 0) scale3d(1, 1.05, 1);
  -webkit-transition: 0.2s cubic-bezier(0.8, 0, 0.5, 1);
  transition: 0.2s cubic-bezier(0.8, 0, 0.5, 1);
}
.switch-pad__rocker-texture:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  opacity: .75;
  background: -webkit-gradient(linear, left top, right top, color-stop(-20%, #80000b), color-stop(33%, #b3000f), color-stop(66%, #b3000f), c.........完整代码请登录后点击上方下载按钮下载查看