svg+css实现炫酷精美精致仪表盘效果代码
代码语言：html
所属分类：图表
代码描述：svg+css实现炫酷精美精致仪表盘效果代码，鼠标点击指针就会动。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,body {
height:100%;
}
body {
display:flex;
flex-direction:column;
background-color:#070707;
color:rgba(255,255,255,0.8);
font-family:Roboto,Ubuntu,Helvetica Neue,sans-serif;
letter-spacing:0.04em;
}
.instructions {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
text-align:center;
font-weight:bold;
font-size:1.4rem;
margin-top:6vh;
margin-bottom:2vh;
-webkit-animation:7s fade-in-out both;
animation:7s fade-in-out both;
-webkit-animation-delay:1s;
animation-delay:1s;
}
@-webkit-keyframes fade-in-out {
0%,100% {
opacity:0;
visibility:hidden;
}
20%,80% {
opacity:1;
visibility:visible;
}
}@keyframes fade-in-out {
0%,100% {
opacity:0;
visibility:hidden;
}
20%,80% {
opacity:1;
visibility:visible;
}
}svg {
display:block;
margin:auto;
max-width:100%;
height:auto;
opacity:0;
-webkit-transform:scale(0.88,0.88);
transform:scale(0.88,0.88);
transition:opacity 1s,-webkit-transform 1s;
transition:opacity 1s,transform 1s;
transition:opacity 1s,transform 1s,-webkit-transform 1s;
}
svg.ready {
opacity:1;
-webkit-transform:scale(1,1);
transform:scale(1,1);
}
.needle {
fill:#3EADFF;
}
.needle-reflection {
opacity:0.42;
fill:url("#grad-needle-reflection-blue");
}
.needle-origin-glow {
fill:url("#grad-needle-origin-glow-blue");
}
.needle-group {
-webkit-transform-origin:300px 300px 0px;
transform-origin:300px 300px 0px;
will-change:transform;
}
.needle-group.warn .needle {
fill:#F23C11;
}
.needle-group.warn .needle-reflection {
fill:url("#grad-needle-reflection-red");
}
.needle-group.warn .needle-origin-glow {
fill:url("#grad-needle-origin-glow-red");
}
.needle-marker {
-webkit-transform-origin:300px 300px 0px;
transform-origin:300px 300px 0px;
fill:url("#grad-needle-marker-blue");
}
.needle-marker.warn {
fill:url("#grad-needle-marker-red");
}
.needle-marker.hide {
opacity:0;
}
.needle-marker.fade {
transition:opacity 2s;
}
.st0 {
opacity:0.36;
fill:#FFFFFF;
}
.st1 {
display:none;
opacity:0.42;
fill:url(#SVGID_38_);
}
.st2 {
opacity:0.26;
}
.st3 {
opacity:0.28;
}
.st4 {
opacity:0.36;
}
.st5 {
opacity:0.42;
}
.st6 {
display:none;
fill:url(#SVGID_36_);
}
.st7 {
display:none;
fill:url(#SVGID_37_);
}
.st8 {
display:none;
fill:url(#SVGID_74_);
}
.st9 {
display:none;
fill:url(#SVGID_75_);
}
.st10 {
display:none;
opacity:0.36;
fill:#FFFFFF;
}
.st11 {
fill:#595959;
}
.st12 {
fill:#F23C11;
}
.st13 {
fill:url(#SVGID_1_);
}
.st14 {
fill:url(#SVGID_2_);
}
.st15 {
fill:url(#SVGID_3_);
}
.st16 {
fill:url(#SVGID_4_);
}
.st17 {
fill:url(#SVGID_5_);
}
.st18 {
fill:url(#SVGID_6_);
}
.st19 {
fill:url(#SVGID_7_);
}
.st20 {
fill:url(#SVGID_8_);
}
.st21 {
fill:url(#SVGID_9_);
}
.st22 {
opacity:0.42;
fill:#FFFFFF;
}
.st23 {
fill:#FFFFFF;
}
.st25 {
opacity:0.42;
fill:url(#SVGID_73_);
}
.st26 {
opacity:0.42;
fill:url(#SVGID_76_);
}
.st27 {
fill:url(#SVGID_10_);
}
.st28 {
fill:url(#SVGID_11_);
}
.st29 {
fill:url(#SVGID_12_);
}
.st30 {
fill:url(#SVGID_13_);
}
.st31 {
fill:url(#SVGID_14_);
}
.st32 {
fill:url(#SVGID_15_);
}
.st33 {
fill:url(#SVGID_16_);
}
.st34 {
fill:url(#SVGID_17_);
}
.st35 {
fill:url(#SVGID_18_);
}
.st36 {
fill:url(#SVGID_19_);
}
.st37 {
fill:url(#SVGID_20_);
}
.st38 {
fill:url(#SVGID_21_);
}
.st39 {
fill:url(#SVGID_22_);
}
.st40 {
fill:url(#SVGID_23_);
}
.st41 {
fill:url(#SVGID_24_);
}
.st42 {
fill:url(#SVGID_25_);
}
.st43 {
fill:url(#SVGID_26_);
}
.st44 {
fill:url(#SVGID_27_);
}
.st45 {
fill:url(#SVGID_28_);
}
.st46 {
fill:url(#SVGID_29_);
}
.st47 {
fill:url(#SVGID_30_);
}
.st48 {
fill:url(#SVGID_31_);
}
.st49 {
fill:url(#SVGID_32_);
}
.st52 {
fill:url(#SVGID_39_);
}
.st53 {
fill:url(#SVGID_40_);
}
.st54 {
fill:url(#SVGID_41_);
}
.st55 {
fill:url(#SVGID_42_);
}
.st56 {
fill:url(#SVGID_43_);
}
.st57 {
fill:url(#SVGID_44_);
}
.st58 {
fill:url(#SVGID_45_);
}
.st59 {
fill:url(#SVGID_46_);
}
.st60 {
fill:url(#SVGID_47_);
}
.st61 {
fill:url(#SVGID_48_);
}
.st62 {
fill:url(#SVGID_49_);
}
.st63 {
fill:url(#SVGID_50_);
}
.st64 {
fill:url(#SVGID_51_);
}
.st65 {
fill:url(#SVGID_52_);
}
.st66 {
fill:url(#SVGID_53_);
}
.st67 {
fill:url(#SVGID_54_);
}
.st68 {
fill:url(#SVGID_55_);
}
.st69 {
fill:url(#SVGID_56_);
}
.st70 {
fill:url(#SVGID_57_);
}
.st71 {
fill:url(#SVGID_58_);
}
.st72 {
fill:url(#SVGID_59_);
}
.st73 {
fill:url(#SVGID_60_);
}
.st74 {
fill:url(#SVGID_61_);
}
.st75 {
fill:url(#SVGID_62_);
}
.st76 {
fill:url(#SVGID_63_);
}
.st77 {
fill:url(#SVGID_64_);
}
.st78 {
fill:url(#SVGID_65_);
}
.st79 {
fill:url(#SVGID_66_);
}
.st80 {
fill:url(#SVGID_67_);
}
.st81 {
fill:url(#SVGID_68_);
}
.st82 {
fill:url(#SVGID_69_);
}
.st83 {
fill:url(#SVGID_70_);
}
.st84 {
fill:url(#SVGID_71_);
}
.st85 {
fill:url(#SVGID_72_);
}
.st86 {
fill:#3EADFF;
}
.st88 {
display:none;
fill:#F23C11;
}
.st89 {
opacity:0.29;
fill:#FFFFFF;
}
</style>
</head>
<body>
<p class="instructions">Click or tap to rev!</p>
<!-- SVG graphic designed in Illustator, then adjusted for animation. --><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="600px" height="560px" viewBox="25 25 550 510"><path d="M163.62,499.92h272.77C500.15,456.34,542,383.06,542,300c0-133.65-108.35-242-242-242C166.35,58,58,166.35,58,300 C58,383.06,99.85,456.34,163.62,499.92z" /><radialGradient id="SVGID_1_" cx="299.5264" cy="299.5342" r="239.876" gradientUnits="userSpaceOnUse"><stop offset="0.6608" style="stop-color:#F23C11;stop-opacity:0" /><stop offset="0.788" style="stop-color:#F23C11;stop-opacity:0.199" /><stop offset="0.8763" style="stop-color:#F23C11;stop-opacity:0.4133" /><stop offset="0.9505" style="stop-color:#F23C11;stop-opacity:0.5428" /><stop offset="1" style="stop-color:#F23C11;stop-opacity:0.75" /></radialGradient><path class="st13" d="M300,300v199.92h132.8C497.42,456.92,540,383.44,540,300c0-28.92-5.35-56.46-14.95-81.91L300,300z" /><radialGradient id="SVGID_2_" cx="300.7852" cy="299.9614" r="238.6152" gradientUnits="userSpaceOnUse"><stop offset="0.6121" style="stop-color:#3EADFF;stop-opacity:0" /><stop offset="0.7774" style="stop-color:#3EADFF;stop-opacity:0.1094" /><stop offset="0.8799" style="stop-color:#3EADFF;stop-opacity:0.25" /><stop offset="0.9505" style="stop-color:#3EADFF;stop-opacity:0.3466" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0.5" /></radialGradient><path class="st14" d="M300,300l225.05-81.91C489.88,124.91,397.46,60,300,60C167.45,60,60,167.45,60,300 c0,83.44,42.58,156.92,107.2,199.92H300V300z" /><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="577.1563" y1="448.3838" x2="619.4561" y2="343.6881" gradientTransform="matrix(-1 0 0 1 812.6602 0)"><stop offset="0" style="stop-color:#000000" /><stop offset="0.424" style="stop-color:#000000;stop-opacity:0.47" /><stop offset="0.6325" style="stop-color:#000000;stop-opacity:0.2284" /><stop offset="1" style="stop-color:#000000;stop-opacity:0" /></linearGradient><path class="st15" d="M308.61,294v205.92H164.75c-39.31-26.87-70.28-65.02-88.26-109.79L308.61,294z" /><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="363.376" y1="448.3838" x2="405.6757" y2="343.6884"><stop offset="0" style="stop-color:#000000" /><stop offset="0.424" style="stop-color:#000000;stop-opacity:0.47" /><stop offset="0.6325" style="stop-color:#000000;stop-opacity:0.2284" /><stop offset="1" style="stop-color:#.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0