Performance Gauges
ThreeUI · CSS · 免费
在云境TS 中打开并复制 →
内容预览
# Performance Gauges Four layered CSS instruments — tachometer, speedometer, turbo boost, and EV power — each isolated to one full-bleed dial with polar tick geometry, scale bands, and a self-testing needle sweep. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/performance-gauges · 预览动画：https://threeui.com/previews/performance-gauges.webm > 分类：CSS > 包含变体（4）：tachometer、speedometer、boost、power /* ===== src/shaders/neuform-isolated/sources/performance-gauges.html (html) ===== */ Performance Diagnostics :root { color-scheme: dark; /* procedural noise fields, generated inline so the document stays self-contained. fractal noise for print grain, anisotropic noise for brushed metal, and a low-frequency field for smudge and dust on the cover glass. */ --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); --tex-metal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 1.5' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='
……（完整源码请在站内查看）