svg+js实现slider滑块重力落下回弹动画效果代码-html代码-BFW代码库

svg+js实现slider滑块重力落下回弹动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+js实现slider滑块重力落下回弹动画效果代码，滑块怎么也拉不上去，拉上去就掉下来了。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">




    <style>
        :root {
          --fill-bar-width: var(--slider-max-width);
          --slider-max-width: 150px;
        }
        
        body {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100vh;
          min-height: 400px;
          background-color: #faf9fd;
        }
        body .slider-container {
          display: flex;
          align-items: center;
          transform: rotateZ(-90deg);
        }
        body .slider-container input[type=range] {
          position: relative;
          -webkit-appearance: none;
          z-index: 1;
          width: var(--slider-max-width);
          height: 6px;
          background: #ebeaf8;
          outline: none;
          border-radius: 6px;
          transition: 250ms;
        }
        body .slider-container input[type=range]:hover {
          cursor: -webkit-grab;
          cursor: grab;
        }
        body .slider-container input[type=range]:active {
          cursor: -webkit-grabbing;
          cursor: grabbing;
        }
        body .slider-container input[type=range]::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
          width: var(--fill-bar-width);
          height: 6px;
          color: #ffffff00;
          background: #4832ff;
          border-radius: 6px;
        }
        body .slider-container input[type=range]::-webkit-slider-thumb {
          position: relative;
          -webkit-appearance: none;
          appearance: none;
          width: 14px;
          height: 14px;
          background: #4832ff;
          border-radius: 50%;
          box-shadow: -4px 0 0 -1px #17161e22;
          z-index: 2;
          -webkit-transition: 100ms;
          transition: 100ms;
        }
        body .slider-container input[type=range]::-webkit-slider-thumb:hover {
          width: 18px;
          height: 18px;
        }
        body .slider-container input[type=range]::-moz-range-thumb {
          -moz-appearance: none;
               appearance: none;
          width: 12px;
          height: 12px;
          background: #4832ff;
          border-radius: 50%;
        }
        body .slider-container svg {
          margin-right: 20px;
          transform: rotateZ(90deg);
          color: #4832ff;
        }
    </style>


</head>

<body>
    <div class="slider-container">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
    <path d="M13.7 2.30021C12.7 1.80021 11.6 2.00021 10.7 2.70021C8.6 4.40021 6.3 6.00021 3.8 7.30021C2.1 8.20021 1 10.0002 1 12.0002C1 13.9002 2.1 15.7002 3.8 16.7002C6.1 17.9002 8.4 19.5002 10.7 21.4002C11.2 21.8002 11.8 22.0002 12.5 22.0002C12.9 22.0002 13.3 21.9002 13.7 21.7002C14.7 21.2002 15.3 20.3002 15.3 19.2002V4.80021C15.3 3.70021 14.7 2.70021 13.7 2.30021Z" fill="currentColor" />.........完整代码请登录后点击上方下载按钮下载查看