css温度传感器显示效果-html代码-BFW代码库

css温度传感器显示效果

代码语言：html

代码描述：css温度传感器显示效果

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
:root {
        --pathlength: 6.284px;
        --currentlength: 3.284px;
        --minTemp: -15;
        --maxTemp: 45;
        --strokeCol: #dd0;
        --fontcol: #dd0;
    }
        main {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-gap: 2vw;
            width: 100%;
            padding: 1vw;
        }
        .box {
            padding: 10px;
            min-width: 22vw;
            max-width: 32vw;
        }
        svg {
            width: 100%;
        }
        .small {
            font-size: 0.3px;
            fill: var(--fontcol);
        }
        path.strokemask {
            fill: none;
            stroke: #fff;
            stroke-width: 0.21px;
            stroke-dasharray: var(--currentlength) var(--pathlength);
            transition: stroke-dasharray0.6s ease-out;
        }
        .inputWrapper {
            display: flex;
            justify-content: center;
            width: 100vw;
        }
        #val:before {
            position: absolute;
            left: -25px;
            content: attr(min);
        }
        #val:after {
            position: absolute;
            right: -20px;
            content: attr(max);
        }
        .third path.strokemask {
            fill: none;
            stroke: var(--str.........完整代码请登录后点击上方下载按钮下载查看