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(--strokeCol);
            stroke-width: 0.4px;
            stroke-linecap: round;
            stroke-linejoin: miter;
            stroke-dasharray: 0.01, var(--pathlength);
            transition: stroke-dasharray0.6s ease-out;
            stroke-dashoffset: calc(-1 * var(--currentlength));
            transition: stroke-dashoffset0.6s ease-out;
        }
        .first #arc {
            stroke: var(--strokeCol);
            stroke-width: 0.18px;
            fill: none;
            stroke-dasharray: 0.1px 0.05px;
        }
        .sec #arc {
            fill: none;
            stroke: var(--strokeCol);
            stroke-width: 0.2;
            stroke-linecap: round;
            stroke-linejoin: miter;
            stroke-opacity: 1;
            stroke-miterlimit: 4;
            stroke-dasharray: 0.01, 0.3;
            stroke-dashoffset: 0.08;
        }
        .backcircle {
            fill: none;
            stroke: #999;
            stroke-width: 0.03px;
        }
        .min,
        .max {
            width: 50px;
        }
@font-face {
            font-family: 'Roboto';
            font-style: italic;
            font-weight: 400;
            src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzc.ttf) format('truetype');
        }
@font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 400;
            src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');
        }
@font-face {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 700;
            src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype');
        }
        html {
            height: 100%;
            color: #333;
            scroll-behavior: smooth;
        }
        body {
            font-family: Roboto,sans-serif;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
            height: 100%;
            background: #000;
        }
        *,
        *:before,
        *:after {
            position: relative;
            box-sizing: border-box;
        }
        .dwf,
        .share {
            position: fixed;
            bottom: 4px;
            right: 10px;
            background-color: #0003;
            padding: 3px;
            border-radius: 3px;
        }
        .dwf .btn,
        .share .btn {
            color: #00f;
            text-decoration: none;
        }
        .share {
            right: auto;
            left: .........完整代码请登录后点击上方下载按钮下载查看