css美化range变成曲线弯曲的滑竿拖动取值器代码-html代码-BFW代码库

css美化range变成曲线弯曲的滑竿拖动取值器代码

代码语言：html

所属分类：拖放

代码描述：css美化range变成曲线弯曲的滑竿拖动取值器代码

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

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

<head>
    <meta charset="UTF-8">



    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');
        
        :root {
                --sz: 1vmin;
                --bg-trick: #fff0;
                --eqz: 0;
        }       
        
        *, *:before, *:after {
                box-sizing: border-box;
                transition: all 0s ease 0s;
                font-family: 'Gochi Hand', Arial, serif;
        }
        
        body {
                margin: 0;
                padding: 0;
                width: 100vw;
                height: 100vh;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, #3a3d44, #3b3e45, #383b42);
        }
        
        body:before, body:after {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                background: 
                        repeating-conic-gradient(#0002 0.000095%, #fff0 .0005%, #fff0 .005%, #fff0 .0005%), 
                        repeating-conic-gradient(#0002 0.00001%, #fff0 .00009%, #fff0 .00075%, #fff0 .000025%);
                opacity: 0.75;
                filter: blur(0.75px);
                z-index: -1;
        }
        
        .content {
                position: relative;
                width: calc(var(--sz) * 50);
                height: calc(var(--sz) * 20);
                display: flex;
                align-items: center;
                justify-content: center;
        }
        
        .content:before {
                content: "";
                position: absolute;
                width: calc(var(--sz) * 50);
                height: calc(var(--sz) * 50);
                border: var(--sz) solid #ffffff;
                border-radius: 155% 75%;
                top: calc(var(--sz) * -13);
                left: calc(var(--sz) * 3);
                transform: rotate(8deg);
                transform-origin: 0 0;
                clip-path: polygon(0 0, 100% 0, 100% 21%, 0 41%);
        
                clip-path: polygon(0 0, 100% 0, 99% 22%, 82% 28%, 20% 38%, 0 41%);
                z-index: -5;
                filter: drop-shadow(5px 5px 2px #0008);
        }
        
        .equalizer {
                height: 100%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
        }
        
        .equalizer:before, 
        .equalizer:after {
                content: "";
                background: radial-gradient(#fff0 calc(var(--sz) * 2.6), #fff calc(calc(var(--sz) * 2.6) + 1px));
                width: calc(var(--sz) * 7);
                position: absolute;
                height: calc(var(--sz) * 7);
                border-radius: 100%;
                left: calc(var(--sz) .........完整代码请登录后点击上方下载按钮下载查看