css布局实现三维质感拟物开关效果代码-html代码-BFW代码库

css布局实现三维质感拟物开关效果代码

代码语言：html

代码描述：css布局实现三维质感拟物开关效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body, html {
          width: 100vw;
          height: 100vh;
        }
        
        body {
          background-image: linear-gradient(135deg, hsl(var(--hue) 20% 95%), hsl(var(--hue) 20% 80%));
          display: flex;
          align-items: center;
          justify-content: center;
          --hue: 220deg;
          --accent-hue: 22deg;
          --duration: 0.6s;
          --easing: cubic-bezier(1, 0, 1, 1);
        }
        
        input {
          display: none;
        }
        
        .switch {
          position: relative;
          cursor: pointer;
          display: flex;
          align-items: center;
          width: 380px;
          height: 150px;
          border-radius: 100px;
          box-shadow: 
            inset 10px 10px 10px hsl(var(--hue) 20% 80%),
            inset -10px -10px 10px hsl(var(--hue) 20% 93%);
        }
        
        .indicator {
          content: '';
          position: absolute;
          width: 40%;
          height: 60%;
          transition: all var(--duration) var(--easing);
          box-shadow: 
            inset 0 0 2px hsl(var(--hue) 20% 15% / 60%),
            inset 0 0 3px 2px hsl(var(--hue) 20% 15% / 60%),
            inset 0 0 5px 2px hsl(var(--hue) 20% 45% / 60%);
        }
        
        .indicator.left {
          --hue: var(--accent-hue);
          overflow: hidden;
          left: 10%;
          border-radius: 100px 0 0 100px;
          background: linear-gradient(180deg, hsl(calc(var(--accent-hue) + 20deg) 95% 80%) 10%, hsl(calc(var(--accent-hue) + 20deg) 100% 60%) 30%, hsl(var(--accent-hue) 90% 50%) 60%, hsl(var(--accent-hue) 90% 60%) 75%, hsl(var(--accent-hue) 90% 50%));
        }
        
        .indicator.left::after {
          content: '';
          position: absolute;
          opacity: 0.6;
          width: 100%;
          height: 100%;
          background: url("data:image/svg+xml;base64,PHN2ZwogIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycKICB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluaycKICB3aWR0aD0nNTAwJyBoZWlnaHQ9JzUwMCc+CgogICAgPGZpbHRlciBpZD0nbm9pc2UnIHg9JzAnIHk9JzAnPgogICAgICA8ZmVUdXJidWxlbmNlCiAgICAgICAgdHlwZT0nZnJhY3RhbE5vaXNlJwogICAgICAgIGJhc2VGcmVxdWVuY3k9JzAuNjUnCiAgICAgICAgbnVtT2N0YXZlcz0nMycKICAgICAgICBzdGl0Y2hUaWxlcz0nc3RpdGNoJwogICAgICAvPgogICAgICA8ZmVCbGVuZCBtb2RlPSJzY3JlZW4.........完整代码请登录后点击上方下载按钮下载查看