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 var(--light);
  filter: blur(0.3vmin);
}

.inner-shadow {
  position: absolute;
  border-radius: inherit;
  --max: 0.98;
  --ratio: 1;
  inset: calc(2.5vmin * var(--ratio));
  box-shadow: 0 0 1vmin calc(0.2vmin * var(--ratio)) rgba(0, 0, 0, 0.2), 0 0 1.5vmin calc(0.1vmin * var(--ratio)) rgba(0, 0, 0, 0.2), 0 0 1.8vmin calc(0.3vmin * var(--ratio)) rgba(0, 0, 0, 0.2), 0vmin 0vmin calc(1.5vmin * var(--ratio)) calc(1.5vmin * var(--ratio)) rgba(77, 94, 112, 0.4392), 0 0 1.5vmin 2vmin rgba(255, 255, 255, 0.8);
}

.active-light {
  position: absolute;
  border-radius: inherit;
  inset: 1.5vmin;
  background: radial-gradient(50% 100% at 50% 50%, #ff5500, #692a0b, transparent 90%), radial-gradient(20% 100% at 100% 50%, var(--color, var(--dark)) 70%, transparent 90%), radial-gradient(20% 100% at 0% 50%, var(--color, var(--dark)) 70%, transparent 90%) no-repeat;
  filter: blur(2vmin) brightness(100%);
  background-size: 200%;
  mix-blend-mode: darken;
  opacity: 0.9;
}

.inner-surface {
  overflow: hidden;
  position: absolute;
  border-radius: inherit;
  --max: 1.2;
  --ratio: 1;
  inset: calc(2vmin * var(--ratio));
  background: linear-gradient(to bottom, rgba(230, 230, 230, 0.8), transparent), radial-.........完整代码请登录后点击上方下载按钮下载查看