jquery+svg实现老式古董布谷鸟报时时钟钟摆动画效果代码
代码语言：html
所属分类：其他
代码描述：jquery+svg实现老式古董布谷鸟报时时钟钟摆动画效果代码
代码标签： jquery svg 老式 古董 布谷鸟 报时 时钟 钟摆 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
background: #5D917D;
}
.center, .minute-hand, .hour-hand, .figurine, .mill, .front-clock, .container {
position: absolute;
left: 50%;
}
.container {
width: 595px;
height: 1024px;
margin-left: -300px;
margin-top: 0;
}
.front-clock {
z-index: 500;
margin-top: -1000px;
margin-left: -300px;
}
.mill {
z-index: 300;
margin-top: -618px;
margin-left: 55px;
}
.figurine {
z-index: 1200;
margin-top: -625px;
margin-left: 140px;
}
.minute-hand, .hour-hand {
z-index: 300;
transform: translateZ(0);
}
.minute-hand {
margin-top: 300px;
margin-left: -11px;
}
.hour-hand {
margin-top: 317px;
margin-left: -14px;
}
.s0 {
stop-color: #52706B;
stop-opacity: 0;
}
.s1 {
stop-color: #307057;
}
#chick {
display: hidden;
}
</style>
</head>
<body>
<div class="container">
<svg class="hour-hand" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="24.5" height="42" viewBox="0 0 24.5 42" enable-background="new 0 0 24.5 42" xml:space="preserve">
<path fill="#36362C" d="M20.97 16.47c-0.68-0.18-1.34-0.19-1.94-0.06 -1.3-0.94-6.33-5.18-8.03-15.35 -0.34 10.31-4.78 15.18-5.94 16.28 -0.62-0.05-1.27 0.04-1.92 0.31 -2.23 0.92-2.66 4.06-1.72 5.19 0.94 1.14 2.37 1.13 3.14 0.43 0.59-0.54 0.85-1.8-0.15-2.33 -0.67-0.36-1.74 0.46-1.11 1.47 -1.79 0.06-1.84-2.18-1.14-3.11 1.3-1.7 5.01-2.35 6.88 2.49 0.84 2.16 0.62 4.76 0.26 6.66 -1.32 3.26-2.31 6.67-1.67 9.33 0.4 1.65 1.13 2.75 1.99 3.48l1.52-1.47c-0.25 0.17-0.48 0.36-0.69 0.57 -0.62-0.58-1.15-1.43-1.44-2.68 -0.87-3.72 2.12-9.26 3.58-12.78 1.91 3.3 5.6 8.4 5.23 12.2 -0.12 1.25-0.52 2.15-1.04 2.8 -0.32-0.23-0.66-0.4-1.02-0.55l1.99 1.29c0.72-0.83 1.27-1.99 1.44-3.62 0.28-2.72-1.14-5.96-2.89-9.02 -0.6-1.83-1.17-4.38-0.62-6.63 1.22-5.05 4.98-4.9 6.49-3.38 0.82 0.82 1.06 3.05-0.72 3.23 0.49-1.09-0.67-1.76-1.29-1.31 -0.91 0.66-0.49 1.87 0.16 2.33 0.85 0.59 2.27 0.41 3.06-0.84C24.14 20.14 23.3 17.09 20.97 16.47zM15.26 19.82c-0.78 2.07-1.13 3.44-1.29 4.39 -0.59-0.93-1.15-1.8-1.62-2.59 -0.37 0.85-0.8 1.79-1.27 2.78 -0.28-0.92-0.81-2.23-1.85-4.18 -0.46-0.86-1.23-1.68-2.18-2.23 1.8-2.53 4.23-6.68 4.27-11.97 0.74 5.24 3.69 9.03 5.81 11.3C16.26 17.99 15.6 18.92 15.26 19.82z"/>
</svg>
<!--hour-hand-->
<svg class="minute-hand" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="23" height="57.4" viewBox="0 0 23 57.4" enable-background="new 0 0 22.954 57.372" xml:space="preserve">
<path fill="#36362C" d="M11.1 0.9C10.5 11.7 7.1 16.8 6.1 18.1c-1.2-0.5-2.6-0.6-3.9 0.2 -2 1.1-2 3.9-1 4.7 1 0.8 2.3 0.6 3-0.1 0.5-0.5 0.6-1.7-0.4-2 -0.7-0.2-1.6 0.6-0.8 1.4 -1.7 0.3-2-1.6-1.4-2.5 1-1.7 4.4-2.7 6.7 1.2 0.7 1.1 0.9 2.4 1 3.6 -2.1 7.6-4.1 16.5-3.4 23.2 0.4 3.9 1.3 6.3 2.4 7.8 -0.1 0.1-0.1 0.1-0.1 0.2l1.4-1.4c-1-1.2-1.9-3.2-2.2-6.7 -0.8-7.5 2.6-18.1 4.3-24.9 1.9 6.8 5.7 17.3 5.1 24.8 -0.3 3.5-1.1 5.6-2 6.8 0 0-0.1-0.1-0.1-0.1l1.6 1.4c-0.1-0.1-0.1-0.2-0.2-0.2 1-1.6 1.9-4 2.2-7.9 0.5-6.8-1.9-15.5-4.2-23.1 0.1-1.2 0.3-2.6 0.9-3.7 2.2-4 5.6-3 6.6-1.4 0.6 0.9 0.3 2.8-1.4 2.6 0.7-0.8-0.2-1.6-0.9-1.4 -1 0.4-0.9 1.5-0.4 2 0.7 0.7 2 0.9 3 0 1-0.9 0.9-3.6-1.1-4.7 -1.4-0.7-2.8-0.6-4 0C15.7 16.6 12.1 11.7 11.1 0.9zM15.4 18.9c-0.2 0.2-0.4 0.4-0.6 0.6 -0.8 1-1.3 1.9-1.7 2.5 -0.6-2-1.2-4-1.7-5.7 -0.4 1.7-1 3.7-1.6 5.7 -0.4-0.7-0.9-1.5-1.7-2.5 -0.2-0.2-0.4-0.4-0.6-0.6 1.5-2.6 3.5-7 3.7-12.7C11.6 12 13.8 16.3 15.4 18.9z"/>
</svg>
<!--minute-hand-->
<svg class="whole-clock" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="595.28" height="992.67" viewBox="0 0 595.28 992.67" enable-background="new 0 0 595.28 992.666" xml:space="preserve">
<g id="Layer_3">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="312.21" y1="786.65" x2="312.21" y2="252.71">
<stop offset="0" class="s0"/>
<stop offset="1" stop-color="#307057"/>
</linearGradient>
<polyline opacity="0.12" fill="url(#SVGID_1_)" points="72.42 252.71 251.87 786.65 552 786.65 522.86 252.71 72.42 252.71 "/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="309.15" y1="992.67" x2="309.15" y2="455.3">
<stop offset="0" class="s0"/>
<stop offset="1" stop-color="#307057"/>
</linearGradient>
<polyline opacity="0.31" fill="url(#SVGID_2_)" points="78 455.31 240.16 992.67 540.29 992.67 515 455.31 88.33 455.31 "/>
</g>
<g id="Layer_2">
<circle fill="#99A37A" cx="329.61" cy="84.56" r="14.21"/>
<circle fill="#99A37A" cx="266.29" cy="83.56" r="14.21"/>
<rect x="146.42" y="386" fill="#99A37A" width="24.99" height="19.67"/>
<circle fill="#99A37A" cx="124.32" cy="427.03" r="17.32"/>
<circle fill="#99A37A" cx="469.79" cy="428.13" r="14.21"/>
<rect x="145.45" y="405.67" fill="#894A2E" width="25.96" height="32.33"/>
<path fill="#4C382A" d="M116.67 276.56c0 0 21.86 16.5 23.6-9.78l5.18 1.14v46.76h14.85c0 0 8.44 24.82 14.45 26.71s245.78 0 245.78 0 14.09-15.85 14.45-26.71h14.85V269.5l5.18-2.72c0 0 5 30.82 23.6 9.78S297.64 120.71 297.64 120.71l-180.97 152.77"/>
<polygon fill="#825534" points="72.42 252.71 93.21 275.68 298.64 100.65 502.07 275.68 522.86 252.71 298.64 76.75 "/>
<circle fill="#E6D4A7" stroke="#DD744B" stroke-width="3" stroke-miterlimit="10" cx="297.64" cy="358.22" r="74.09"/>
<path fill="#514643" d="M93.21 275.68c3.44-1.85 11.44-4.64 19.75 3.1L297.64 109.73l184.68 169.05c8.31-7.74 16.31-4.95 19.75-3.1L297.64 89.62 93.21 275.68z"/>
<path fill="#825534" d="M445.34 304.27h-12.96c-1.65 12.65-12.79 22.36-25.94 22.36 -13.15 0-24.28-9.72-25.94-22.36h-12.96V203.23c-1.68-0.75-3.2-1.77-4.49-3.04v113.49h14.85c1.1 14.49 13.45 25.92 28.54 25.92 15.09 0 27.44-11.42 28.54-25.91h14.85v-46.3c-1.56 0-3.07-0.24-4.49-0.67V304.27z"/>
<path fill="#825534" d="M415.54 235.5c-1.22 0.31-2.47 0.47-3.75 0.47 -1.61 0-3.16-0.25-4.61-0.71v89.91c4.96-0.14 9.55-1.71 13.36-4.3v-73.19c-3.07-2.8-5.02-6.82-5.02-11.3C415.51 236.08 415.52 235.79 415.54 235.5z"/>
<path fill="#825534" d="M396.49 220.66c0-0.29 0.01-0.58 0.03-0.87 -1.22 0.31-2.48 0.47-3.75 0.47 -0.14 0-0.27-0.02-0.4-0.02v100.62c3.81 2.6 8.4 4.16 13.36 4.3V234.7C400.29 232.35 396.49 226.94 396.49 220.66z"/>
<path fill="#825534" d="M436.8 260.06v42.75h7.08v-36.65C440.94 264.92 438.46 262.77 436.8 260.06z"/>
<path fill="#825534" d="M369 203.79v99.02h7.08v-98.45c-0.77 0.12-1.56 0.19-2.35 0.19C372.08 204.55 370.49 204.28 369 203.79z"/>
<path fill="#825534" d="M377.54 206.53v96.28h4.28c0.52 6.84 3.95 12.89 9.08 16.96v-99.64C383.85 219.27 378.27 213.62 377.54 206.53z"/>
<path fill="#825534" d="M434.56 251.2c-1.22 0.31-2.47 0.47-3.75 0.47 -3.29 0-6.33-1.05-8.82-2.82v70.93c5.13-4.08 8.56-10.12 9.08-16.96h4.28V256.96c-0.52-1.54-0.81-3.18-0.81-4.89C434.53 251.79 434.54 251.49 434.56 251.2z"/>
<circle fill="#EFE7D3" cx="297.64" cy="358.22" r="67.17"/>
<path fill="#825534" d="M324.44 36.2c-1.53-0.66-3.64-1.53-6-2.49 -0.98-11.86-9.91-21.15-20.79-21.15s-19.82 9.29-20.79 21.15c-2.37 0.96-4.48 1.83-6 2.49 -7.69 3.32-6.56 9.63-6.56 13.68 0 10.09 0 30.19 0 37.68l33.35-28.72 33.35 28.73c0-7.49 0-27.59 0-37.68C330.99 45.83 332.13 39.52 324.44 36.2zM297.64 29.4c-3.31 0-5.99-2.68-5.99-5.99s2.68-5.99 5.99-5.99 5.99 2.68 5.99 5.99S300.95 29.4 297.64 29.4z"/>
<polygon fill="#AD6E4B" points="72.42 252.71 90.67 260.9 297.64 82.65 504.61 260.9 522.86 252.71 297.64 58.75 "/>
<path fill="#36362C" d="M93.21 275.68c3.44-1.85 11.44-4.64 19.75 3.1L297.64 119.73l184.68 159.05c8.31-7.74 16.31-4.95 19.75-3.1L297.64 99.62 93.21 275.68z"/>
<path fill="#825534" d="M227.74 304.27h-12.96c-1.65 12.65-12.79 22.36-25.94 22.36 -13.15 0-24.28-9.72-25.94-22.36h-12.96v-37.57c-1.42 0.44-2.93 0.68-4.49 0.68v46.3h14.85c-0.36 16.54 13.45 25.92 28.54 25.92 15.09 0 27.44-11.42 28.54-25.91h14.86V200.18c-1.3 1.27-2.82 2.3-4.49 3.04V304.27z"/>
<path fill="#825534" d="M179.74 235.5c0.02 0.29 0.03 0.58 0.03 0.87 0 4.48-1.94 8.5-5.02 11.3v73.19c3.81 2.6 8.4 4.16 13.36 4.3v-89.91c-1.46 0.46-3.01 0.71-4.61 0.71C182.22 235.96 180.96 235.81 179.74 235.5z"/>
<path fill="#825534" d="M198.77 219.79c0.02 0.29 0.03 0.58 0.03 0.87 0 6.28-3.81 11.68-9.23 14.04v90.46c4.96-0.14 9.55-1.71 13.36-4.3V220.24c-0.13 0-0.27 0.02-0.4 0.02C201.24 220.26 199.99 220.1 198.77 219.79z"/>
<path fill="#825534" d="M151.4 266.17v36.65h7.08v-42.75C156.82 262.77 154.35 264.92 151.4 266.17z"/>
<path fill="#825534" d="M219.2 204.37v98.45h7.08V203.79c-1.49 0.49-3.08 0.76-4.74 0.76C220.75 204.55 219.97 204.49 219.2 204.37z"/>
<path fill="#825534" d="M204.38 220.13v99.65c5.13-4.08 8.56-10.12 9.08-16.96h4.28v-96.28C217.01 213.62 211.43 219.27 204.38 220.13z"/>
<path fill="#825534" d="M160.72 251.2c0.02 0.29 0.03 0.58 0.03 0.87 0 1.71-0.29 3.35-0.81 4.89v45.85h4.28c0.52 6.84 3.95 12.89 9.08 16.96v-70.93c-2.5 1.77-5.54 2.82-8.82 2.82C163.19 251.67 161.94 251.51 160.72 251.2z"/>
<path fill="#825534" d="M297.64 177.74c-17.66 0-31.97 14.32-31.97 31.98s14.32 31.98 31.98 31.98c17.66 0 31.98-14.31 31.98-31.97S315.3 177.74 297.64 177.74zM297.64 234.52c-13.7 0-24.81-11.11-24.81-24.81s11.11-24.81 24.81-24.81c13.7 0 24.81 11.11 24.81 24.81S311.34 234.52 297.64 234.52z"/>
<circle fill="#231F20" cx="267.64" cy="305.27" r="1.7"/>
<circle fill="#231F20" cx="297.95" cy="297.54" r="1.7"/>
<circle fill="#231F20" cx="329.33" cy="306.32" r="1.7"/>
<circle fill="#231F20" cx="351.49" cy="328.92" r="1.7"/>
<circle fill="#231F20" cx="359.52" cy="358.4" r="1.7"/>
<circle fill="#231F20" cx="351.19" cy="390.46" r="1.7"/>
<circle fill="#231F20" cx="328.5" cy="412.96" r="1.7"/>
<circle fill="#231F20" cx="297.95" cy="421.19" r="1.7"/>
<circle fill="#231F20" cx="266.5" cy="412.71" r="1.7"/>
<circle fill="#231F20" cx="243.8" cy="389.78" r="1.7"/>
<circle fill="#231F20" cx="235.77" cy="358.4" r="1.7"/>
<circle fill="#231F20" cx="244.58" cy="327.61" r="1.7"/>
<path fill="#514643" d="M301.43 391.4c0-1.92-1.56-3.48-3.48-3.48 -1.92 0-3.48 1.56-3.48 3.48 0 1.26 0.67 2.35 1.67 2.96l-0.78 8.05h5.18l-0.78-8.05C300.75 393.74 301.43 392.65 301.43 391.4z"/>
<path fill="#9E5F3F" d="M378.17 312.36h-15.29V192.25c-2.01-2.65-3.22-5.96-3.22-9.55 0-0.3 0.01-0.6 0.03-0.9 -1.24 0.32-2.52 0.48-3.82 0.48 -8.6 0-15.61-7.07-15.61-15.76 0-0.3 0.01-0.6 0.03-0.9 -1.25 0.32-2.52 0.48-3.83 0.48 -8.6 0-15.61-7.07-15.61-15.76 0-0.3 0.01-0.6 0.03-0.9 -1.25 0.32-2.52 0.48-3.83 0.48 -8.61 0-15.61-7.07-15.61-15.76 0-0.3 0.01-0.6 0.03-0.9 -1.25 0.32-2.52 0.48-3.82 0.48 -1.3 0-2.58-0.16-3.82-0.48 0.02 0.3 0.03 0.6 0.03 0.9 0 8.69-7 15.76-15.61 15.76 -1.3 0-2.58-0.16-3.82-0.48 0.02 0.3 0.03 0.6 0.03 0.9 0 8.69-7 15.76-15.61 15.76 -1.3 0-2.58-0.16-3.82-0.48 0.02 0.3 0.03 0.6 0.03 0.9 0 8.69-7 15.76-15.61 15.76 -1.3 0-2.58-0.16-3.83-0.48 0.02 0.3 0.03 0.6 0.03 0.9 0 3.59-1.21 6.9-3.22 9.55v120.12H217.11c-1.85 15.08-14.96 26.69-30.46 26.69 -6.75 0-13.05-2.21-18.17-5.95v108.38H297.64h129.15V333.11c-5.11 3.74-11.41 5.95-18.17 5.95C393.13 339.06 380.02 327.44 378.17 312.36zM297.64 173.98c19.11 0 34.6 15.64 34.6 34.94 0 19.3-15.49 34.94-34.6 34.94 -19.11 0-34.6-15.64-34.6-34.94C263.04 189.62 278.53 173.98 297.64 173.98zM261.35 220.93c5.2 15.59 19.48 26.79 36.29 26.79s31.09-11.2 36.29-26.79h8.44c-5.48 20.27-23.43 35.15-44.73 35.15 -21.31 0-39.25-14.87-44.73-35.15H261.35zM297.64 432.11c-40.59 0-73.49-33.23-73.49-74.22 0-40.99 32.91-74.22 73.5-74.22 40.59 0 73.5 33.23 73.5 74.22C371.14 398.89 338.23 432.11 297.64 432.11z"/>
<circle fill="#6B534D" cx="297.64" cy="252.54" r="2.72"/>
<circle fill="#6B534D" cx="259.67" cy="227.19" r="2.72"/>
<circle fill="#6B534D" cx="285.13" cy="250.69" r="2.72"/>
<circle fill="#6B534D" cx="274.03" cy="244.71" r="2.72"/>
<circle fill="#6B534D" cx="265.55" cy="236.98" r="2.72"/>
<circle fill="#6B534D" cx="335.61" cy="227.19" r="2.72"/>
<circle fill="#6B534D" cx="310.15" cy="250.69" r="2.72"/>
<circle fill="#6B534D" cx="321.25" cy="244.71" r="2.72"/>
<circle fill="#6B534D" cx="329.73" cy="236.98" r="2.72"/>
<path fill="#825534" d="M116.67 278.56c2.5 2.5 5.94 4.06 9.75 4.06 7.65 0 13.84-6.2 13.84-13.84 0-1.04-0.12-2.04-0.34-3.01 1.69 0.74 3.56 1.15 5.52 1.15 7.65 0 13.84-6.2 13.84-13.84 0-1.04-0.12-2.04-0.34-3.01 1.69 0.74 3.56 1.15 5.52 1.15 7.65 0 13.84-6.2 13.84-13.84 0-1.04-0.12-2.04-0.34-3.01 1.69 0.74 3.56 1.15 5.52 1.15 7.65 0 13.84-6.2 13.84-13.84 0-1.04-0.12-2.04-0.34-3.01 1.69 0.74 3.56 1.15 5.52 1.15 7.65 0 13.84-6.2 13.84-13.8.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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