css实现三维磨砂开关按钮效果代码-html代码-BFW代码库

css实现三维磨砂开关按钮效果代码

代码语言：html

代码描述：css实现三维磨砂开关按钮效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@property --ratio {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
@property --color {
  syntax: "<color>";
  inherits: true;
  initial-value: white;
}
@property --glowposition {
  syntax: "<percent>";
  inherits: true;
  initial-value: 0%;
}
:root {
  --light: #f7fbfc;
  --dark: #bcc7d3;
  --duration: 0.25s;
  --press-duration: 0.25s;
  --press-timing-function: ease-in-out;
  --timing-function: ease-in-out;
}

.surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.bg {
  background: white;
  position: absolute;
  inset: 0vmin;
  box-shadow: 10px 10px 25px 10px var(--dark), -10px -10px 25px 10px var(--light);
  border-radius: inherit;
  filter: blur(0.8vmin);
}
.bg:before {
  content: "";
  position: absolute;
  bottom: -1px;
  right: 1vmin;
  border-radius: inherit;
  box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.6);
  top: 3vmin;
  left: 2vmin;
  z-index: -1;
}
.bg:after {
  content: "";
  position: absolute;
  inset: 1.2vmin;
  background: white;
  border-radius: inherit;
}

.outer-shadow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.outer-shadow:before {
  content: "";
  position: absolute;
  border-radius: inherit;
  left: -1vmin;
  top: 1vmin;
  bottom: 1vmin;
  right: 0;
  border-left: 1vmin solid rgba(0, 0, 0, 0.05);
  filter: blur(0.3vmin);
}
.outer-shadow:after {
  content: "";
  position: absolute;
  border-radius: inherit;
  left: 0vmin;
  top: 1vmin;
  bottom: 1vmin;
  right: 0.5vmin;
  border-top: 0.5vmin solid rgba(0, 0, 0, 0.5);
  border-bottom: 3vmin solid.........完整代码请登录后点击上方下载按钮下载查看