js+css实现金属质感旋钮拖拽旋转数值变化效果代码-html代码-BFW代码库

js+css实现金属质感旋钮拖拽旋转数值变化效果代码

代码语言：html

所属分类：拖放

代码描述：js+css实现金属质感旋钮拖拽旋转数值变化效果代码

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

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

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

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&family=IBM+Plex+Serif&family=Poppins:wght@100;200&family=Raleway:wght@100;200&display=swap");
:root {
  --grainy: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.829' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

:root {
  --opacityExp: "";
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: "DM Sans";
  background: #eee;
  background: radial-gradient(closest-side, #fff, rgba(0, 0, 0, 0.4));
}
body::before {
  background: var(--grainy);
  mix-blend-mode: luminosity;
  content: "";
  display: block;
  inset: 0;
  opacity: 0.7;
  position: absolute;
  z-index: 0;
}

input[type=range] {
  --w: 200px;
  --w2: 12px;
  --angle: 160deg;
  --posx: calc(cos(var(--angle) + 135deg ) * (var(--w) / 2.4));
  --posy: calc(sin(var(--angle) + 135deg) * (var(--w) / 2.4));
  width: var(--w);
  height: var(--w);
  position: relative;
  cursor: grab;
}
input[type=range]::before {
  content: "";
  position: absolute;
  top: calc(50% - var(--w) / 2 - var(--w2) / 4);
  left: calc(50% - var(--w) / 2 - var(--w2) / 4);
  width: var(--w);
  height: var(--w);
  border-radius: 50%;
  background: rgba(173, 133, 133, 0.7);
  background: repeating-conic-gradient(#888 0%, #ddd 15%, #999 33%, #eee 40%, #aaa 50%);
  opacity: var(--opacityExp);
  border: 5px solid #aaa;
  box-shadow: 0 0 4px 15px #000;
  transform: rotate(var(--angle));
}
input[type=range]::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - var(--w2) / 2);
  left: calc(50% - var(--w2) / 2);
  translate: var(--posx) var(--posy);
  width: var(--w2);
  height: var(--w2);
  border-radius: 50%;
  border: 2p.........完整代码请登录后点击上方下载按钮下载查看