css布局绘制可调节的金属质感声音旋钮效果代码-html代码-BFW代码库

css布局绘制可调节的金属质感声音旋钮效果代码

代码语言：html

代码描述：css布局绘制可调节的金属质感声音旋钮效果代码，点击可以实现声音大小调节。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');
        
        body {
          margin: 0;
          width: 100vw;
          height: 100vh;
          background: 
            repeating-linear-gradient(transparent 0 13%, #ffffff08 0 calc(13% + 1px), transparent 0) 30% 0% / 40% 100%,
            repeating-linear-gradient(transparent 0 7%, #ffffff0a 0 calc(7% + 1px), transparent 0) 70% 0% / 33% 100%,
            repeating-linear-gradient(transparent 0 11%, #ffffff08 0 calc(11% + 1px), transparent 0) -10% 0% / 35% 100%,
            repeating-linear-gradient(transparent 0 17%, #ffffff11 0 calc(17% + 1px), transparent 0) 110% 0% / 27% 100%,
            repeating-linear-gradient(transparent 0 13%, #00000008 0 calc(13% + 1px), transparent 0) 60% -10% / 33% 100%,
            repeating-linear-gradient(transparent 0 8%, #00000008 0 calc(8% + 1px), transparent 0) 21% 2% / 27% 100%,
            repeating-linear-gradient(transparent 0 8%, #00000002 0 calc(8% + 1px), transparent 0) 31% 7% / 19% 100%,
            
            repeating-linear-gradient(transparent 0 13%, #00000004 0 calc(13% + 1px), transparent 0) 71% 15% / 19% 100%,
            linear-gradient(-45deg, #767a80, #b8b8bb);
          background-repeat: no-repeat;
          display: grid;
          place-items: center;
        }
        
        @property --x {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 10%;
        }
        
        @property --y {
          syntax: '<percentage>';
          inherits: false;
          initial-value: 50%;
        }
        
        input {
          transition: all 0.2s;
          position: relative;
          --x: 10%;
          --y: 50%;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          width: 40vmin;
          height: 40vmin;
          border-radius: 50%;
          background: blue;
          box-shadow: 
            -24.75vmin 0 0 -19.5vmin #000c,
            -23.25vmin -9vmin 0 -19.4vmin #000c,
            -18.75vmin -16vmin 0 -19.3vmin #000c,
            -12.25vmin -21vmin 0 -19.2vmin #000c,
            -4.75vmin -24vmin 0 -19.1vmin #000c,
            4.75vmin -24vmin 0 -19.0vmin #000c,
            12.5vmin -21.25vmin 0 -18.9vmin #000c,
            19vmin -16.25vmin 0 -18.8vmin #000c,
            23.25vmin -9vmin 0 -18.7vmin #000c,
            25vmin 0 0 -18.6vmin #000c,
            23.25vmin 9vmin 0 -18.5vmin #000c,
            0 0 1.5vmin -0.5vmin #0007,
            3vmin 3vmin 3vmin -2vmin,
            inset 0.5vmin 0.5vmin 0.5vmin #fff6,
            inset -0.5vmin -0.5vmin 0.5vmin #0003;
          background:
            radial-gradient(farthest-side, transparent calc(95% - 1px), #fff3 0 95%, #87848a88 0),
            radial-gradient(#3a3a3a77, #1b213911 50%, transparent),
            radial-gradient(closest-side, #d00, #800 70%, #400 80%, #4444 0 calc(80% + 1px), transparent) var(--x) var(--y) / 10% 10%,
            repeating-radial-gradient(#fbfbfb11 0 0.625%, #3a3a3a11 0 1.25%),
            conic-gradient(#fbfbfb88 0, transparent 45deg 135deg, #fbfbfb88 180deg, transparent 225deg 315deg, #fbfbfb88),
        .........完整代码请登录后点击上方下载按钮下载查看