css+js实现range石头拖动后返回原位动画效果代码-html代码-BFW代码库

css+js实现range石头拖动后返回原位动画效果代码

代码语言：html

所属分类：拖放

代码描述：css+js实现range石头拖动后返回原位动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700">
  
  
  
<style>
:root {
        --rotation-angle: 0deg;
}

body {
        background-color: hsl(35, 50%, 80%);
}

#container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80vh;
}

#sliderValue {

        text-align: center;
        font-family: Roboto, sans-serif;
        font-size: 0.5em;
        font-weight:700;
}

/* Slider */
input[type="range"]::-ms-track {
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;

}

input[type="range"]:focus {
        outline: none;
}

.slider {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-shadow: none;
        background-color: transparent;
        width: 200px;
        height: 38px;
        border: none;
        background: none;
        border-bottom: 8px solid #000;
        outline: none;
        z-index: 999;
}

.slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-shadow: none;
        background-color: transparent;
        width: 40px;.........完整代码请登录后点击上方下载按钮下载查看