css+js实现可调节健身圆环图表效果代码
代码语言:html
所属分类:图表
代码描述:css+js实现可调节健身圆环图表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @layer properties { @property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: true; } @property --percent { syntax: "<percent>"; inherits: true; initial-value: 0%; } } :root { --debug: 0; --bg-background: hsl(218deg 5% 14%); --angle: 0deg; --percent: 0%; --color-blue-1: hsla(160, 100%, 50%, 1); --color-blue-2: hsla(186, 100%, 49%, 1); --color-green-1: hsla(85, 100%, 50%, 1); --color-green-2: hsla(69, 100%, 50%, 1); --color-red-1: hsla(344, 96%, 53%, 1); --color-red-2: hsla(336, 94%, 60%, 1); } *, *:before, *:after { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; outline: calc(var(--debug) * 1px) dotted hsl(calc(var(--debug) * 10 * 1deg), 60%, 60%); } html, body, main { width: 100%; height: 100%; margin: 0; padding: 0; } body { background: var(--bg-background); font-family: "Mona Sans", sans-serif; color: white; } body main { display: grid; grid-template-rows: repeat(2, 1fr); } @media (min-width: 960px) { body main { grid-template-rows: repeat(1, 1fr); grid-template-columns: repeat(2, 1fr); } } body main .loaders { display: flex; align-items: center; justify-content: center; } body main div.loader { --track-size: 10vh; --init-size: 50vh; --divider: 1; --size: calc(var(--init-size) / var(--divider)); --radius: calc(var(--size) / 2 - calc(var(--track-size) / 4)); --colors: var(--color-red-1), var(--color-red-2); width: clamp(var(--size), 5vh, 600px); max-width: 600px; position: absolute; aspect-ratio: 1/1; background: conic-gradient(from 0deg at 50% 50% in oklab, var(--colors) var(--percent), black var(--percent)); border-radius: 100000px; animation: rotate 2s ease-in-out infinite; transform-origin: center; } @media (max-width: 960px) { body main div.loader { --track-size: 8vh; --init-size: 35vh; --divider: 1; --size: calc(var(--init-size) / var(--divider)); } } body main div.loader + div.loader { --divider: 1.5; --size: calc(var(--init-size) / var(--divider)); --colors: var(--color-green-1), var(--color-green-2); } body main div.loader + div.loader:before { background: var(--color-green-1); } body main div.loader + div.loader:after { background: var(--color-green-2); } body main div.loader + div.loader + div.loader { --divider: 3; --size: calc(var(--init-size) / var(--divider)); --colors: var(--color-blue-1), var(--color-blue-2); } body main div.loader + div.loader + div.loader:before { background: var(--color-blue-1); } body main div.loader + div.loader + div.loader:after { background: var(--color-blue-2); } @supports (color: color(display-p3 0 0 0)) { body main div.loader.dp3-colors { --color-blue-1: color(display-p3 0.39 1 0.68); --color-blue-2: color(display-p3 0.28 0.88 1); --color-green-1: color(display-p3 0.66 1 0.18); --color-green-2: color(display-p3 0.88 1 0.21); --color-red-1: color(display-p3 0.95 0.03 0.3); --color-red-2: color(display-p3 0.98 0.02 0.51); } } body main div.loader:before, body main div.loader:after { content: ""; display: block; position: absolute; width: calc(var(--track-size) / 2); aspect-ratio: 1/1; } body main div.loader:before { top: 0; left: calc(50% - calc(var(--track-size) / 4)); background: var(--color-red-1); border-radius: var(--track-size); } body main div.loader:after { content: ""; background: var(--color-red-2); border-radius: var(--track-size); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform: rotate(var(--angle)); translate: calc(cos(calc(var(--angle) - 90deg) * -1) * var(--radius)) calc(sin(calc(var(--angle) - 90deg)) * var(--radius)); box-shadow: 6px 0 10px -4px rgba(0, 0, 0, 0.4); } body main div.inner { position: absolute; width: calc(100% - var(--track-size)); aspect-ratio: 1/1; background: var(--bg-background); border-radius: 100000px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } nav { top: 0; left: 0; padding: 2em 2em; display: grid; grid-gap: 16px; z-index: 2; height: 50vh; width: 100%; backdrop-filter: blur(6px); background: rgba(0, 0, 0, 0.2); align-items: flex-start; } nav .infos { display: grid; grid-template-columns: repeat(2, 1fr); } @media (min-width: 960px) { nav { height: 100%; } } nav > div { display: flex; flex-direction: column; grid-gap: 16px; } nav input[type=range] { width: 60%; } nav p span { display: inline-block; border: 1px solid rgba(255, 255, 255, 0.5); margin-bottom: 8px; padding: 4px; font-weight: bold; } nav code { display: inline-block; padding: 6px; outline: 1px dashed rgba(255, 255, 255, 0.4); } nav code:focus { outline-color: white; } nav button { all: unset; display: none; border: 1px solid white; text-align: center; border-radius: 4px; cursor: pointer; } a { color: rgba(255, 255, 255, 0.8); } </style> </head> <body > <main> <nav> <button id="toggle-nav">Open</button> <div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0