css美化input range成一幅画拖动对比效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：css美化input range成一幅画拖动对比效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        input {
          --trunk: maroon;
          --ground: white;
          --sky: #dde;
          --sky2: #bbd;
          position: absolute;
          top: 45%;
          left: 50%;
          transform: translate(-50%, -50%);
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          width: 70vmin;
          height: 50vmin;
          background:
            /* tree */
            conic-gradient(at 50% -20%, #0000 177deg, var(--trunk) 177.25deg 182.75deg, #0000 183deg) 30vmin 50% / 10vmin 30vmin,
            
            
            conic-gradient(at 110% 30%, #0000 237deg, var(--trunk) 237.25deg 245.75deg, #0000 247deg) 35vmin 60% / 10vmin 20vmin,
            conic-gradient(at 110% 40%, #0000 217deg, var(--trunk) 217.25deg 225.75deg, #0000 227deg) 38vmin 48% / 4vmin 10vmin,
            conic-gradient(at 110% 30%, #0000 287deg, var(--trunk) 287.25deg 295.75deg, #0000 297deg) 43vmin 60% / 3vmin 10vmin,
            
            conic-gradient(at 120% 30%, #0000 217deg, var(--trunk) 217.25deg 222.75deg, #0000 223deg) 35vmin 24% / 6vmin 14vmin,
            conic-gradient(at 110% 30%, #0000 277deg, var(--trunk) 277.25deg 282.75deg, #0000 283deg) 39.75vmin 34% / 4vmin 10vmin,
            conic-gradient(at 110% 40%, #0000 237deg, var(--trunk) 227.25deg 235.75deg, #0000 247deg) 41.75vmin 28% / 2vmin 8vmin,
            
            conic-gradient(at 120% 30%, #0000 207deg, var(--trunk) 207.25deg 212.75deg, #0000 213deg) 35vmin 10% / 3vmin 9vmin,
            conic-gradient(at 120% 30%, #0000 217deg, var(--trunk) 217.25deg 223.75deg, #0000 224deg) 35vmin 21% / 3vmin 9vmin,
            
            conic-gradient(at -40% 30%, #0000 95deg, var(--trunk) 0 100deg, #0000 0) 26vmin 50% / 9vmin 10vmin,
            conic-gradient(at -40% 10%, #0000 115deg, var(--trunk) 0 120deg, #0000 0) 28vmin 47% / 4vmin 6vmin,
            conic-gradient(at -40% 80%, #0000 36deg, var(--trunk) 0 40deg, #0000 0) 31vmin 60% / 9vmin 10vmin,
            
             conic-gradient(at -40% -20%, #0000 110deg, var(--trunk) 0 115deg, #0000 0) 27.5vmin 38% / 7.5vmin 6vmin,
            conic-gradient(at 0% -20%, #0000 160deg, var(--trunk) 0 165deg, #0000 0) 29vmin 30% / 7.5vmin 4vmin,
            
            conic-gradient(at 0% -20%, #0000 150deg, var(--trunk) 0 158deg, #0000 0) 31.5vmin 25% / 4vmin 6vmin,
            
            /* snow */
            radial-gradient(closest-side, white 40%, #0000 0) 70% 70% / 1vmin 1vmin,
            radial-gradient(closest-side, white 50%, #0000 0) 60% 60% / 1vmin 1vmin,
            radial-gradient(closest-side, white 60%, #0000 0) 80% 30% / 1vmin 1vmin,
            radial-gradient(closest-side, white 70%, #0000 0) 90% 60% / 1vmin 1vmin,
            radial-gradient(closest-side, white 40%, #0000 0) 50% 10% / 1vmin 1vmin,
            radial-gradient(closest-side, white 50%, #0000 0) 55% 25% / 1vmin 1vmin,
            radial-gradient(closest-side, white 60%, #0000 0) 65% 15% / 1vmin 1vmin,
            radial-gradient(closest-side, white 70%, #0000 0) 75% 34% / 1vmin 1vmin,
            radial-gradient(closest-side, white 40%, #0000 0) 85% 10% / 1vmin 1vmin,
            radial-gradient(closest-side, white 50%, #0000 0) 95% 77% / 1vmin 1vmin,
            radial-gradient(closest-side, white 60%, #0000 0) 72% 50% / 1vmin 1vmin,
            radial-gradient(closest-side, white 70%, #0000 0) 92% 35% / 1vmin 1vmin,
            
            radial-gradient(closest-side, white 40%, #0000 0) 5% 70% / 1vmin 1vmin,
            radial-gradient(closest-side, white 50%, #0000 0) 15% 60% / 1vmin 1vmin,
            radial-gradient(closest-side, white 60%, #0000 0) 25% 30% / 1vmin 1vmin,
            radial-gradient(closest-side, white 70%, #0000 0) 35% 60% / 1vmin 1vmin,
            radial-gradient(closest-side, white 40%, #0000 0) 45% 10% / 1vmin 1vmin,
            radial-gradient(closest-side, white 50%, #0000 0) 17% 25% / 1vmin 1vmin,
            radial-gradient(closest-side, white 60%, #0000 0) 37% 15% / 1vmin 1vmin,
            radial-gradient(closest-side, white 70%, #0000 0) 27% 34% / 1vmin 1vmin,
            radial-gradient(closest-side, white 40%, #0000 0) 46% 70% / 1vmin 1vmin,
            radial-gradient(closest-side, white 50%, #0000 0) 22% 77% / 1vmin 1vmin,
            radial-gradient(closest-side, white 60%, #0000 0) 28% 50% / 1vmin 1vmin,
            radial-gradient(closest-side, white 70%, #0000 0) 10% 10% / 1vmin 1vmin,
            /* background */
            radial-gradient(175vmin 50% at 35vmin 95%, var(--ground) 30%, #0000 30.25%),
            radial-gradient(farthest-side at 50% 70%, #bb6, #aa5 99%, #0000) 6.5vmin 84% / 11vmin 7vmin,
            radial-gradient(farthest-side at 50% 70%, #fff 99%, #0000 0) 7vmin 84% / 10vmin 8vmin,
            radial-gradient(farthest-side at 50% 110%, #def 99%, #0000 0) 38vmin 87% / 100vmin 10vmin,
            linear-gradient(var(--sky2), var(--sky))
            ;
          background-repeat: no-repeat;
          background-color: #f002;
          overflow: hidden;
          border: 5vmin ridge #963;
          box-shadow: 
            -21vmin 38vmin 0 -29.25vmin #fff,
            -26.75vmin 38vmin 0 -29.5vmin #222,
            -27vmin 40vmin 0 -29.75vmin #888,
            -26vmin 40vmin 0 -29.75vmin #fff,
            -22vmin 40vmin 0 -29.75vmin #888,
            -21.5vmin 41.5vmin 0 -29.75vmin #888,
            -22.5vmin 41.5vmin 0 -29.75vmin #fff,
            -27vmin 41.5vmin 0 -29.75vmin #888,
            -21vmin 43vmin 0 -29.75vmin #fff,
            -27vmin 43vmin 0 -29.75vmin #888,
            -25vmin 40vmin 0 -25vmin white,
            -24.75vmin 40.25vmin 0 -25vmin #0002,
            0 0 0 100vmax #def;
        }
        
        input::before {
          --trunk: brown;
          --ground: green;
          --sky2.........完整代码请登录后点击上方下载按钮下载查看