css+div布局立体质感通知开启关闭开关按钮代码
代码语言:html
所属分类:布局界面
代码描述:css+div布局立体质感通知开启关闭开关按钮代码,点击开关有炫酷质感动画。
代码标签: css div 布局 立体 质感 通知 开启 关闭 开关 按钮 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style>
body{
margin: 200px;
}
.toggle-container {
--bg-top: #ffffff;
--bg-btm: #182235;
--bg: #f7f7f7;
--card: #acb3bf;
--card-2: #59616c;
--shadow-dark: #515151;
--shadow-light: #526d91;
--primary: #d7f63b;
--primary-2: #ebdb25;
--primary-3: #d8b91d;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--text: #e2e8f0;
--muted: #a59c9c;
--muted-2: #242d3b;
--ring: rgba(59, 130, 246, 0.55);
--elev-outer-a: 18px 18px 36px var(--shadow-dark);
--elev-outer-b: -18px -18px 36px rgba(255, 255, 255, 0.08);
--card-outer-a: 12px 12px 24px rgba(0, 0, 0, 0.5);
--card-outer-b: -12px -12px 24px rgba(255, 255, 255, 0.06);
--switch-outer-a: 6px 6px 12px rgba(0, 0, 0, 0.45);
--switch-outer-b: -6px -6px 12px rgba(255, 255, 255, 0.07);
--ao-rim: inset 0 0 0.5px 1px rgba(255, 255, 255, 0.04);
--shadow-ring: 0 0 0 1px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
gap: 8px;
width: 310px;
padding: 35px 25px;
position: relative;
background: radial-gradient(
120% 100% at 0% 0%,
rgba(255, 255, 255, 0.05) 0%,
transparent 50%
),
linear-gradient(145deg, var(--bg-top), var(--bg-btm));
box-shadow:
inset 2px 2px 2px rgba(0, 0, 0, 0.416),
-2px -2px 2px rgba(255, 255, 255, 0.438) inset;
border: 2px solid rgba(255, 255, 255, 0.06);
backdrop-filter: saturate(110%) blur(0.4px);
overflow: hidden;
}
.toggle-container::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(
1px 1px at 25% 30%,
rgba(255, 255, 255, 0.03) 0,
transparent 60%
),
radial-gradient(1px 1px at 60% 70%, rgba(0, 0, 0, 0.06) 0, transparent 60%);
background-size:
140px 140px,
180px 180px;
mix-blend-mode: soft-light;
opacity: 0.35;
}
.toggle-container::before {
content: "";
position: absolute;
inset: 2px 2px auto 2px;
height: 44px;
border-radius: 18px 18px 12px 12px;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0)
);
pointer-events: none;
}
.toggle-title {
color: gray;
font-size: 22px;
font-weight: 800;
letter-spacing: 0.2px;
margin-bottom: 14px;
}
.toggle-label {
.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0