gsap+svg实现万圣节蜘蛛指针时钟走动显示时间代码
代码语言：html
所属分类：动画
代码描述：gsap+svg实现万圣节蜘蛛指针时钟走动显示时间代码
代码标签： gsap svg 万圣节 蜘蛛 指针 时钟 走动 显示 时间 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0px;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #cadfe8;
background: -webkit-linear-gradient(135deg,#a34a01 0%, #654201 100%);
background: linear-gradient(135deg,#a34a01 0%, #654201 100%);
background-repeat: no-repeat;
color: #FFF;
}
.vline
{
position:fixed;
top: 0;
left: calc( 50% + 20px );
height: 50vh;
width: 1.5px;
background-color: #FFF;
z-index: 10;
opacity: 0.75;
visibility: hidden;
}
.gsapWrapper {
visibility: hidden;
#wBody {
position: relative;
width: 340px;
height: 340px;
display: flex;
justify-content: center;
align-items: center;
#watch {
width: 300px;
height: 300px;
overflow: visible;
border-radius: 50%;
svg {
overflow: visible;
width: 300px;
height: 300px;
}
}
}
}
</style>
</head>
<body translate="no">
<div class="vline"></div>
<div class="gsapWrapper">
<div id="wBody">
<div id="watch">
<svg id="watchSVG" overflow="visible" version="1.1" viewBox="0 0 300 300" xmlns:xlink="http://www.w3.org/1999/xlink" >
<g transform="matrix(0.97,0.02,-0.02,0.97,19.19,-6.07)"><use class="cog cw t24" fill-opacity="0.3" href="#cog1" /></g>
<use class="cog ccw t12" href="#cog2" fill-opacity="0.4" />
<g transform="matrix(0.93,0,0,0.93,9.460262,5.75)"><use class="cog cw t24" fill-opacity="0.4" href="#cog1" transform="rotate(-51.810031,132.27636,-30.515465)" /></g>
<g transform="rotate(-3.7621103,160.78969,349.2265)"><use class="cog cw t20" fill-opacity="0.4" href="#cog5" /></g>
<g transform="rotate(-2.7463672,162.45282,88.573956)">
<use class="cog ccw t12" href="#cog2" fill-opacity="0.5" transform="rotate(-117.25759,103.54258,173.50156)" />
</g>
<g transform="rotate(-10.176195,143.10035,73.854981)"><use class="cog ccw t12" href="#cog2" fill-opacity="0.5" transform="rotate(-34.224386,-107.18833,39.101999)" /></g>
<use class="cog ccw t12" fill-opacity="0.08" href="#cog5" filter="url(#blur1)" transform="matrix(1.756136,-0.11547602,0.11547602,1.756136,-258.10202,-151.7933)" />
<use class="cog cw t24" fill-opacity="0.05" href="#cog1" filter="url(#blur2)" transform="matrix(2.2837863,0.04708838,-0.04708838,2.2837863,58.766756,-235.77904)" />
<use class="cog ccw t12" fill-opacity="0.03" href="#cog1" filter="url(#blur3)" transform="matrix(4.1933711,0.08646126,-0.08646126,4.1933711,-272.22866,-548.76437)" />
<use id="clockFace" fill="#FFFFFF" fill-opacity="0.15" stroke="none" href="#arabic" filter="url(#shadow)" />
<g id="spider" style="display:inline" transform="matrix(3.7795276,0,0,3.7795276,0,-3.2951691e-6)">
<path id="hands-body" fill="#FFFFFF" stroke="none" filter="url(#shadow)" d="m 39.8,32.2 -0.3,0.2 -2.9,7.9 c 2.9,3.6 2.6,2.8 7,4.5 -4.3,1.7 -3.8,2 -6.4,5.7 l 1.3,4 0.3,0.1 -0.5,-3.7 c 2.2,-3.1 7.2,-8.2 13.1,0 l -0.5,3.7 0.3,-0.1 1.3,-4 c -2.4,-4 -2.2,-3.8 -6.3,-5.7 4.9,-1.7 4,-0.9 7,-4.5 l -2.9,-7.9 -0.3,-0.2 1.6,7.6 c -2.9,3.9 -8.5,5.9 -13.6,0 z" />
<g id="hr">
<circle fill="#FFFFFF" fill-opacity="0" stroke="none" cx="44.98" cy="44.98" r="44.98" />
<path id="hand-hr" fill="#FFFFFF" stroke="none" filter="url(#shadow)" d="m 44.5,17.5 -4.1,16.5 0.9,4 L 46.4,46.3 48.5,44 l -5.1,-6.2 -1.7,-3.8 L 44.9,17.6 Z" />
</g>
<g id="min">
<circle fill="#FFFFFF" fill-opacity="0" stroke="none" filter="url(#shadow)" style="display:inline" cx="44.98" cy="44.98" r="44.98" />
<path id="hand-min" fill="#FFFFFF" stroke="none" filter="url(#shadow)" d="m 45.3,9.2 5.5,17 -0.8,12.2 c -1.9,2.8 -4.4,5.1 -6.9,7.3 l -1.7,-1.8 c 7.4,-4.7 7,-9.5 8.1,-17.7 L 44.9,9.3 Z" />
</g>
<g id="sec">
<circle fill="#FFFFFF" fill-opacity="0" stroke="none" cx="44.98" cy="44.98" r="44.98" />
<path id="hand-sec" fill="#FFFFFF" stroke="none" filter="url(#shadow)" d="m 44.8,1.7 -6.2,24.5 0.1,12.3 4.6,4.3 2.9,3.1 1.9,-1.3 C 40,39.4 40.6,35.2 39.9,26.2 L 45.2,1.8 Z" />
</g>
<path id="body" fill="#FFFFFF" stroke="none" filter="url(#shadow2)" d="m 45.1,50.35 c 0.5,0 0.8,0.2 0.7,0.4 -0.4,0.6 -0.4,0.9 0.3,0.4 0.2,-0.1 0.3,-1.1 0.4,-1.2 1.1,-0.7 1.6,-1.9 1.1,-3.3 v -0.6 c 0.6,-0.6 1.3,-1.9 1.3,-3.2 0,-2.6 -1.3,-5.1 -3.9,-5.1 -1.9,0 -3.9,2.6 -3.9,5.1 0.3,2.1 0.6,2.6 1.3,3.2 v 0.6 c -0.4,1.4 -0.1,2.7 0.9,3.2 0.2,0.1 0,0.8 0.4,1.2 0.5,0.5 0.9,0.3 0.2,-0.5 -0.2,-0.2 0.5,-0.2 1,-0.2 z" />
</g>
</svg>
</div>
</div>
</div>
<svg width="0" width="0" role="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id='shadow' x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="0" flood-color="#a34a01" stdDeviation="1" />
</filter>
<filter id='shadow2' x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="0" flood-color="#a34a01" stdDeviation="2" />
</filter>
<filter id='blur1'><feGaussianBlur stdDeviation='0.5' result='blur' /></filter>
<filter id='blur2'><feGaussianBlur stdDeviation='0.625' result='blur' /></filter>
<filter id='blur3'><feGaussianBlur stdDeviation='0.75' result='blur' /></filter>
<path id="cog1" fill="#FFFFFF" stroke="none" d="m 64.7,71.08 -3.1,9.4 c -1.2,0 -2.6,0.1 -3.8,0.2 l -4.3,-8.9 c -1.6,0.1 -3.1,0.6 -4.7,1 l -0..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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