js+css实现可拖动滑动扇形UV 索引轮代码

代码语言:html

所属分类:拖放

代码描述:js+css实现可拖动滑动扇形UV 索引轮代码

代码标签: js css 拖动 滑动 扇形 UV 索引轮 代码

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

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

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

  
  
  
<style>
:root {
  --thumb-size: 2rem;
  --track-size: 4rem;
  --half-thumb-size: calc(var(--track-size) / 2);
  --value: 0;
  --uv-150: #78b232;
  --uv-400: #efad08;
  --uv-650: #e78214;
  --uv-950: #da3d27;
  --uv-1000: #a35995;
  --accent-000: #000;
  font-family: system-ui;
  text-align: center;
  margin: 4rem auto;
  background-color: #fff;
}

body {
  margin: 0;
}

.wheel {
  color: var(--accent-900);
  display: block;
  width: 15rem;
  margin: 0 auto;
  font-size: 0.8rem;
  font-weight: bold;
  aspect-ratio: 1/1;
  display: inline-grid;
  align-items: center;
  background: no-repeat;
  container-type: inline-size;
  container-name: knobs;
  align-items: center;
  justify-items: center.........完整代码请登录后点击上方下载按钮下载查看

网友评论0