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