vue+SVG实现一个逼真指针交互手表代码-html代码-BFW代码库

代码语言：html

代码描述：Functional SVG Watch是一个使用HTML和CSS编写的交互式SVG手表。它具有可定制的数字和指针，可以通过JavaScript进行交互。该手表使用了CSS动画和过渡效果，使其看起来更加真实。它还具有可调整大小的响应式设计，可以适应不同大小的屏幕。

代码标签： vue SVG 逼真指针交互手表代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>

     <style>

  #app {
    width: 100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
background: #000000;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #242424, #000000);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #242424, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  }
  .edge {
    filter: url(#bevel);
    fill: url(#black-grd);
  }
  .inner {
    filter: url(#inner-shadow);
    fill: url(#dial-bg);
  }
  .shadow {
    filter: url(#shadow);
  }
  .hour-lg {
    font-weight: 100;
  }
  .hour-sm {
    font-weight: 100;
  }
  .hour-marker {
    filter: url(#text-shadow);
    font-family: 'Gideon Roman';
    fill: url(#text);
    user-select:none;
  }
  .logo {
    filter: url(#text-shadow);
    font-family: 'Gideon Roman';
    fill: url(#logo-grd);
    user-select:none;
  }
  .pattern {
    fill: url(#inner-pattern)
  }
  .glass {
    fill: url(#glass);
  }
  .hand {
    filter: drop-shadow(0px 1px 0px rgb(0,0,0,.5));
  }
  .second-hand {
    fill: hsl(200, 0%, 55%);
  }
  .case {
    filter: url(#case-bevel);
    fill: url(#metal);
  }
  .strap-holder {
    stroke-width: 5;
    stroke: url(#metal);
    filter: url(#case-bevel);
    stroke-linecap:round;
  }
  .knob {
    fill: url(#metal-2);
  }
  text {
    user-select:none;
  }

      </style>
</head>
<body>

  <div id="app">
    <svg @click="change" @touchstart="change" @touchmove="change" @mousemove="change" height="100%" width="100%" viewBox="-60 -80 120 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <pattern id='inner-pattern' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='rotate(45) scale(.06)'><rect filter="url(#bevel)" :fill="`hsl(240, 0%, ${lightness * 1.5}%)`" x="1" y="1" width="38" height="38" /></pattern>
        <linearGradient id="metal">
          <stop :stop-color="`hsl(210, 8%, ${lightness * .63}%)`" offset="0%" />
          <stop :stop-color="`hsl(240, 1%, ${lightness * .84}%)`" offset="40%"/>
          <stop :stop-color="`hsl(240, 0%, ${lightness * .95}%)`" offset="50%" />
          <stop :stop-color="`hsl(240, 1%, ${lightness * .84}%)`" offset="60%"/>
          <stop :stop-color="`hsl(210, 8%, ${lightness * .63}%)`" offset="100%" />
        </linearGradient>
        <linearGradient id="metal-2" x1="0" x2="1" y1="0" y2="1">
          <stop :stop-color="`hsl(210, 8%, ${lightness * .63}%)`" offset="0%" />
          <stop :stop-color="`hsl(240, 1%, ${lightness * .84}%)`" offset="40%"/>
          <stop :stop-color="`hsl(240, 0%, ${lightness * .95}%)`" offset="50%" />
          <stop :stop-color="`hsl(240, 1%, ${lightness * .84}%)`" offset="60%"/>
          <stop :stop-color="`hsl(210, 8%, ${lightness * .63}%)`" offset="100%" />
        </linearGradient>
        <linearGradient id="black-grd">
          <stop stop-color="rgb(100, 100, 100)" offset="20%"/>
          <stop stop-color="rgb(140, 140, 140)" offset="60%"/>
        </linearGradient>
        <linearGradient id="text" gradientTransform="rotate(95)">
          <stop offset="5%"  stop-color="hsl(0, 0%, 95%)" />
          <stop offset="40%" stop-color="hsl(0, 0%, 50%)" />
          <stop offset="50%" stop-color="hsl(0, 0%, 50%)" />
          <stop offset="100%" stop-color="hsl(0, 0%, 9%)" />
        </linearGradient>
        <linearGradient id="logo-grd" gradientTransform="rotate(95)">
          <stop offset="5%"  stop-color="hsl(0, 0%, 95%)" />
          <stop offset="40%" stop-color="hsl(0, 0%, 80%)" />
          <stop offset="50%" stop-color="hsl(0, 0%, 60%)" />
          <stop offset="100%" stop-color="hsl(0, 0%, 55%)" />
        </linearGradient>
        <radialGradient id="center" fx=".5" fy=".05">
          <stop offset="30%" stop-color="rgb(100,100,100)" />
          <stop offset="99%" stop-color="rgb(40,40,40)" />
          <stop offset="100%" stop-color="rgb(20,20,20)" />
        </radialGradient>
        <radialGradient id="dial-bg" fx=".5" fy=".05">
          <stop offset="0%" :stop-color="`hsl(0, 0%, 85%)`" />
          <stop offset="60%" :stop-color="`hsl(0, 0%, 45%)`" />
          <stop offset="97%" :stop-color="`hsl(0, 0%, 60%)`" />
          <stop offset="100%" :stop-color="`hsl(0, 0%, 0%)`" />
        </radialGradient>
        <radialGradient id="glass" fx=".5" fy=".05" gradientTransform="rotate(1)">
          <stop offset="0%" stop-color="white" stop-opacity=".5"/>
          <stop offset="10%" stop-color="white" stop-opacity=".4"/>
          <stop offset="50%" stop-color="white" stop-opacity=".3"/>
          <stop offset="60%" stop-color="white" stop-opacity=".1"/>
        </radialGradient>
        <filter id="inset-shadow">
          <feOffset dx=".5" dy=".5"/>
          <feGaussianBlur stdDeviation=".4"  result="offset-blur"/>
          <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="in.........完整代码请登录后点击上方下载按钮下载查看