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,
       .........完整代码请登录后点击上方下载按钮下载查看