div+css美化checkbox开关成打桌球效果代码-html代码-BFW代码库

div+css美化checkbox开关成打桌球效果代码

代码语言：html

代码描述：div+css美化checkbox开关成打桌球效果代码

下面为部分代码预览，完整代码请点击下载或在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{
    background:black;
    margin:200px;
}
.switch {
  position: relative;
  display: inline-flex;
  width: 368px;
  height: 176px;
  background: linear-gradient(135deg, #78350f 0%, #451a03 50%, #290f02 100%);
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 2px #b45309,
    inset 0 0 10px 4px rgba(0, 0, 0, 0.9),
    0 32px 64px -8px rgba(0, 0, 0, 0.95),
    0 0 0 6px #020617,
    0 0 0 10px #1e293b;
  cursor: pointer;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease;
  user-select: none;
}

.switch:hover {
  transform: scale(1.02);
  box-shadow:
    inset 0 0 0 2px #d97706,
    inset 0 0 10px 4px rgba(0, 0, 0, 0.9),
    0 40px 80px -8px rgba(0, 0, 0, 1),
    0 0 0 6px #020617,
    0 0 0 10px #334155;
}

.switch:active {
  transform: scale(0.98);
}

.switch input {
  display: none;
}

.wood.........完整代码请登录后点击上方下载按钮下载查看