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

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

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