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:#000000;stop-opacity:0" /></linearGradient><path class="st16" d="M290.27,294v205.92h143.86c39.31-26.87,70.28-65.02,88.26-109.79L290.27,294z" /><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="300.0005" y1="67" x2="300.0005" y2="82.0005" gradientTransform="matrix(0.9925 -0.1219 0.1219 0.9925 -34.3242 38.7968)"><stop offset="0.2" style="stop-color:#3EADFF" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0" /></linearGradient><polygon class="st17" points="274.43,83.5 272.44,83.75 270.61,68.86 272.6,68.61 " /><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="300" y1="66.9995" x2="300" y2="82.0005" gradientTransform="matrix(0.9925 0.1219 -0.1219 0.9925 38.7967 -34.3251)"><stop offset="0.2" style="stop-color:#3EADFF" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0" /></linearGradient><polygon class="st18" points="327.56,83.75 325.58,83.5 327.4,68.62 329.39,68.86 " /><linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="300.0005" y1="67.0005" x2="300.0005" y2="82.0015" gradientTransform="matrix(0.9336 0.3584 -0.3584 0.9336 127.436 -87.5852)"><stop offset="0.2" style="stop-color:#3EADFF" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0" /></linearGradient><polygon class="st19" points="379.06,96.84 377.19,96.12 382.57,82.12 384.43,82.83 " /><linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="300" y1="66.9995" x2="300" y2="82.0005" gradientTransform="matrix(0.8192 0.5736 -0.5736 0.8192 226.3269 -117.8197)"><stop offset="0.2" style="stop-color:#3EADFF" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0" /></linearGradient><polygon class="st20" points="425.86,122 424.22,120.85 432.82,108.56 434.46,109.71 " /><linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="300.001" y1="66.9995" x2="300.001" y2="82.0005" gradientTransform="matrix(0.6561 0.7547 -0.7547 0.6561 329.5947 -123.2317)"><stop offset="0.2" style="stop-color:#3EADFF" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0" /></linearGradient><polygon class="st21" points="465.18,157.73 463.87,156.22 475.19,146.38 476.5,147.89 " /><linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="300.0005" y1="67.0005" x2="300.0005" y2="82.001" gradientTransform="matrix(0.454 0.891 -0.891 0.454 431.1046 -103.5001)"><stop offset="0.2" style="stop-color:#3EADFF" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0" /></linearGradient><polygon class="st27" points="494.69,201.92 493.79,200.14 507.15,193.33 508.06,195.11 " /><linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="300.0005" y1="67.0005" x2="300.0005" y2="82.0005" gradientTransform="matrix(0.225 0.9744 -0.9744 0.225 524.8253 -59.7973)"><stop offset="0.2" style="stop-color:#F23C11" /><stop offset="1" style="stop-color:#F23C11;stop-opacity:0" /></linearGradient><polygon class="st28" points="512.64,251.94 512.19,249.99 526.8,246.61 527.25,248.56 " /><linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="300.0005" y1="67" x2="300.0005" y2="81.999" gradientTransform="matrix(-0.0175 0.9998 -0.9998 -0.0175 605.1898 5.28)"><stop offset="0.2" style="stop-color:#F23C11" /><stop offset="1" style="stop-color:#F23C11;stop-opacity:0" /></linearGradient><polygon class="st29" points="517.95,304.8 517.98,302.8 532.98,303.07 532.95,305.07 " /><linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="300.0005" y1="67.002" x2="300.0005" y2="82.0005" gradientTransform="matrix(-0.2588 0.9659 -0.9659 -0.2588 667.4231 87.8665)"><stop offset="0.2" style="stop-color:#F23C11" /><stop offset="1" style="stop-color:#F23C11;stop-opacity:0" /></linearGradient><polygon class="st30" points="510.31,357.39 510.83,355.46 525.32,359.34 524.8,361.27 " /><linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="300" y1="67.0005" x2="300" y2="82.001" gradientTransform="matrix(0.9336 -0.3584 0.3584 0.9336 -87.5852 127.436)"><stop offset="0.2" style="stop-color:#3EADFF" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0" /></linearGradient><polygon class="st31" points="222.81,96.12 220.94,96.84 215.57,82.83 217.43,82.12 " /><linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="300.0005" y1="67.0005" x2="300.0005" y2="82.001" gradientTransform="matrix(0.8192 -0.5736 0.5736 0.8192 -117.8187 226.3269)"><stop offset="0.2" style="stop-color:#3EADFF" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0" /></linearGradient><polygon class="st32" points="175.78,120.85 174.14,122 165.54,109.71 167.18,108.56 " /><linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="299.9995" y1="67.0005" x2="299.9995" y2="82.001" gradientTransform="matrix(0.6561 -0.7547 0.7547 0.6561 -123.2307 329.5947)"><stop offset="0.2" style="stop-color:#3EADFF" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0" /></linearGradient><polygon class="st33" points="136.13,156.22 134.82,157.73 123.5,147.89 124.81,146.38 " /><linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="299.9995" y1="67" x2="299.9995" y2="82.0005" gradientTransform="matrix(0.454 -0.891 0.891 0.454 -103.5001 431.1046)"><stop offset="0.2" style="stop-color:#3EADFF" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0" /></linearGradient><polygon class="st34" points="106.21,200.14 105.31,201.92 91.94,195.11 92.85,193.33 " /><linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="299.9995" y1="67" x2="299.9995" y2="82.0005" gradientTransform="matrix(0.225 -0.9744 0.9744 0.225 -59.7973 524.8253)"><stop offset="0.2" style="stop-color:#3EADFF" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0" /></linearGradient><polygon class="st35" points="87.81,249.99 87.36,251.93 72.75,248.56 73.2,246.61 " /><linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="299.9995" y1="67.0005" x2="299.9995" y2="82.0005" gradientTransform="matrix(-0.0175 -0.9998 0.9998 -0.0175 5.2805 605.1898)"><stop offset="0.2" style="stop-color:#3EADFF" /><stop offset="1" style="stop-color:#3EADFF;stop-opacity:0" /></linearGradient><polygon class="st36" points="82.01,302.8 82.05,304.8 67.05,305.07 67.02,303.07 " .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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