TweenMax+DrawSVGPlugin3+svg实现视觉差异立体仪表盘效果代码-html代码-BFW代码库

TweenMax+DrawSVGPlugin3+svg实现视觉差异立体仪表盘效果代码

代码语言：html

代码描述：TweenMax+DrawSVGPlugin3+svg实现视觉差异立体仪表盘效果代码，移动鼠标可以看效果。

代码标签： TweenMax DrawSVGPlugin3 svg 视觉差异立体仪表盘

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

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

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

    <style>
        @import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

html, body {
  height: 100%;
  font-family: Roboto Mono;
  background-color: hsl(243,12%,29%);
}
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <svg viewBox="0 0 500 500" width=100% height=100%>
    <defs>
    </defs>
    <g id="ring2">
      <g id="ring2-1">
        <circle class="c3" cx="50%" cy="50%" r=150
                fill="none"
                stroke="hsl(218,38%,76%)"
                stroke-width=15
                stroke-dasharray="1 34"></circle>
        <circle class="c3" cx="50%" cy="50%" r=162
                fill="none"
                stroke="hsl(218,38%,76%)"
                stroke-width=1></circle>
      </g>
      <g transform="translate(80,80)">
        <text fill="hsl(218,38%,56%)"
              font-size=14>Time</text>
        <text id="time-text" y=13
              fill="hsl(218,38%,76%)"
              font-size=11></text>
        <circle cx="-20" fill="none" stroke="hsla(218,38%,76%,0.3)"
                stroke-width=3
                r=12></circle>
        <circle class="c4" cx="-20"
                fill="none" stroke="hsl(218,38%,76%)"
                stroke-width=3
                r=12></circle>
      </g>
      <g transform="translate(80,115)">
        <text fill="hsl(218,38%,56%)"
              font-size=14>Energy</text>
        <text id="energy-text" y=13
              fill="hsl(218,38%,76%)"
              font-size=11></text>
        <circle cx="-20" fill="none" stroke="hsla(218,38%,76%,0.3)"
                stroke-width=3
                r=12></circle>
        <circle class="c5" cx="-20"
                fill="none" stroke="hsl(218,38%,76%)"
                stroke-width=3
                r=12></circle>
      </g>
      <g transform="translate(420,80)">
        <text fill="hsl(218,38%,56%)"
              font-size=14 text-anchor="end">Bandwidth</text>
        <text id="bandwidth-text" y=13
              fill="hsl(218,38%,76%)"
              font-size=11 text-anchor="end"></text>
        <circle cx="20" fill="none" stroke="hsla(218,38%,76%,0.3)"
                stroke-width=3
                r=12></circle>
        <circle class="c6" cx="20"
                fill="none" stroke="hsl(218,38%,76%)"
                stroke-width=3
                r=12></circle>
      </g>
      <g transform="translate(420,115)">
        <text fill="hsl(218,38%,56%)"
              font-size=14 text-anchor="end">Disk</text>
        <text id="disk-text" y=13
              fill="hsl(218,38%,76%)"
              font-size=11 text-anchor="end"></text>
        <circle cx="20" fill="none" stroke="hsla(218,38%,76%,0.3)"
                stroke-width=3
                r=12></circle>
        <circle class="c7" cx="20"
                fill="none" stroke="hsl(218,38%,76%)"
                stroke-width=3
                r=12></circle>
      </g>
      <text id="move-text"
            x="50%" y=460 fill="hsl(218,38%,76%)"
            text-anchor="middle"
            font-size=24>Move your mouse</text>
    </g>
    <g id="ring3">
      <g id="ring3-1">
        <circle class="c1" cx="50%" cy="50%" r=75
                fill="none"
                stroke="hsl(8,34%,45%)"
                stroke-width=4></circle>
        <circle class="c2" cx="50%" cy="50%" r=75
                fill="none"
                stroke="hsl(8,34%,45%)"
                stroke-width=4></circle>
        <circle class="c3" cx="50%" cy="50%" r=73
                fill="none"
                stroke="hsl(8,34%,45%)"
                stroke-width=2></circle>
      </g>
      <circle class="c4" cx="50%" cy="50%" r=60
              fill="none"
              stroke="hsl(218,38%,76%)"
              stroke-width=2></circle>
    </g>
    <g id="ring4">
      <circle class="c1" cx="50%" cy="50%" r=40
              fill="none"
              stroke="hsl(218,38%,76%)"
              stroke-width=1></circle>
      <circle class="c2" cx="50%" cy="50%" r=35
              fill="none"
              stroke="hsl(218,38%,76%)"
              stroke-width=1></circle>
      <circle class="c3" cx="50%" cy="50%" r=30
              fill="none"
              stroke="hsl(218,38%,76%)"
              stroke-width=1&g.........完整代码请登录后点击上方下载按钮下载查看