range拖动控制仪表盘指针转动效果代码

代码语言:html

所属分类:拖放

代码描述:range拖动控制仪表盘指针转动效果代码

代码标签: range 拖动 控制 仪表盘 指针 转动

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

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

<head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.1.2.css">


<style>
.graph-container {
  --size: 20rem;
  --stroke-size: calc(var(--size)/5);
  --rating: 0;
  position: relative;
  display: inline-flex;
  box-sizing: border-box;
}
.graph-container *, .graph-container *::before, .graph-container *::after {
  box-sizing: border-box;
}

.half-donut {
  width: var(--size);
  height: calc(var(--size)/2);
  border-radius: var(--size) var(--size) 0 0;
  position: relative;
  overflow: hidden;
  filter: drop-shadow(0 0 0.3rem #0005);
}

.slice {
  --stroke-color: #000;
  --rotate: 0deg;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: var(--.........完整代码请登录后点击上方下载按钮下载查看

网友评论0