jquery+svg实现下载上传速度网速测试仪表盘效果代码-html代码-BFW代码库

jquery+svg实现下载上传速度网速测试仪表盘效果代码

代码语言：html

所属分类：其他

代码描述：jquery+svg实现下载上传速度网速测试仪表盘效果代码

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

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

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Nunito'>
    <style>
        html,body {
    	height:100%;
    }
    body {
    	background-image:linear-gradient(rgba(0,0,0,0.25),rgba(255,255,255,0.25) 50%,rgba(255,255,255,0) 50%),linear-gradient(#e31212,#e31212 50%,#fff 50%);
    	display:flex;
    	align-items:center;
    	justify-content:center;
    	font-family:"Nunito",sans-serif;
    }
    #speedtest {
    	position:relative;
    	width:300px;
    	height:300px;
    	padding:20px;
    	border-radius:6px;
    	box-sizing:border-box;
    }
    #speedtest #gauge {
    	width:100%;
    	height:100%;
    	padding:12px;
    	background:#fff;
    	border-radius:50%;
    	box-shadow:0 0 32px rgba(21,55,172,0.25),inset 0 -192px 192px -240px #e31212;
    	box-sizing:border-box;
    }
    #speedtest #gauge path:first-child {
    	opacity:1 !important;
    	display:block !important;
    }
    #speedtest #gauge-label {
    	position:absolute;
    	top:47.5%;
    	left:50%;
    	font-size:64px;
    	-webkit-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    	color:#e31212;
    }
    #speedtest #gauge-label:after {
    	content:"Mbit/s";
    	position:absolute;
    	font-size:35%;
    	bottom:5px;
    	left:50%;
    	-webkit-transform:translate(-50%,100%);
    	transform:translate(-50%,100%);
    }
    #speedtest:before,#speedtest:after {
    	display:block;
    	position:absolute;
    	bottom:25%;
    	font-family:inherit;
    	font-size:14px;
    	color:#9198af;
    }
    #s.........完整代码请登录后点击上方下载按钮下载查看