vue+SVG实现一个逼真指针交互手表代码
代码语言：html
所属分类：布局界面
代码描述：Functional SVG Watch是一个使用HTML和CSS编写的交互式SVG手表。它具有可定制的数字和指针，可以通过JavaScript进行交互。该手表使用了CSS动画和过渡效果，使其看起来更加真实。它还具有可调整大小的响应式设计，可以适应不同大小的屏幕。
下面为部分代码预览，完整代码请点击下载或在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="inverse"/>
<feFlood flood-color="black" flood-opacity="1" result="color"/>
<feComposite operator="in" in="color" in2="inverse" result="shadow"/>
<feComponentTransfer in="shadow" result="shadow">
<feFuncA type="linear" slope=".75"/>
</feComponentTransfer>
</filter>
<filter id="shadow">
<feDropShadow dx="0" dy="0" stdDeviation=".2"
flood-color="black" flood-opacity="1"/>
</filter>
<filter id="text-shadow">
<feDropShadow dx=".2" dy=".2" stdDeviation=".2"
flood-color="black" flood-opacity="1"/>
</filter>
<filter id='inner-shadow'>
<feOffset dx='0' dy='2'/>
<feGaussianBlur stdDeviation='.4' result='offset-blur' />
<feComposite operator='out' in='SourceGraphic' in2='offset-blur' result='inverse' />
<feFlood flood-color='black' flood-opacity='.5' result='color' />
<feComposite operator='in' in='color' in2='inverse' result='shadow' />
<feComposite operator='over' in='shadow' in2='SourceGraphic' />
</filter>
<filter id="bevel" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="0.4" result="blur"/>
<feSpecularLighting in="blur" surfaceScale="45" specularConstant="0.5" specularExponent="10" result="specOut" lighting-color="white">
<fePointLight x="-5000" y="-10000" z="0000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
<feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
</filter>
<filter id="case-bevel" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feSpecularLighting in="blur" surfaceScale="45" specularConstant="0.5" specularExponent="10" result="specOut" lighting-color="white">
<fePointLight x="-5000" y="-10000" z="0000"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
<feComposite in="Sour.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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