range美化成金属质感不锈钢旋钮可拖动效果代码-html代码-BFW代码库

range美化成金属质感不锈钢旋钮可拖动效果代码

代码语言：html

代码描述：range美化成金属质感不锈钢旋钮可拖动效果代码

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

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

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

  
  
<style>
/* Basic css - do not care about that, the tricks are below*/
@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap");
body,
html {  box-sizing: border-box; height: 100%;   font-family: "Funnel Display", serif;}
body {  margin: 0px;    height: 100%;   display: flex;  align-items: center;    justify-content: center;        background-color: #2c3e50;      font-size: 1.3em;       font-weight: 300;       color: #fff;}
h1 {    font-weight: 200;       font-size: 1.5em;}
/* End of basic css */


.range_ui { position: relative;}
.range_ui input { display: block; opacity: 0.01; width:150px; height:150px; margin: 0px; padding: 0px;}
.range_ui .knobwrap { position:absolute; top:0px; left: 0px; right: 0px; bottom: 0px; background-image:conic-gradient(#fff, #666, #ccf, #666, #fff); border-radius: 150px; box-shadow: 0px 20px 20px -5px #000, inset 0px 0px 10px 2px rgba(255,255,255,var(--percentage));}
.range_ui .knob {  rotate: var(--rotate); width:150px; height: 150px; position: absolute; border-radius: 150px;  }
.range_ui .knob:before { content: ' '; width:0px; border:solid 1px #000; height: 25px; position: absolute; left: 48.5%;}
</style>

.........完整代码请登录后点击上方下载按钮下载查看