<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5/SVG实现布谷鸟时钟动画DEMO演示</title>
<style>
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
</style>
<style>
body {
background: #5D917D;
}
.center, .container, .front-clock, .mill, .figurine, .minute-hand, .hour-hand {
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>
<script src="js/prefixfree.min.js"></script>
</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
HTML5+SVG实现发热布谷鸟时钟动画效果源码
需积分: 9 92 浏览量
2015-09-02
14:13:34
上传
评论
收藏 25KB RAR 举报
HTML5+SVG实现发热布谷鸟时钟动画效果源码.rar （8个子文件） 
index2.html 83KB
scss 
style.scss 887B js index.js 2KB prefixfree.min.js 6KB css normalize.css 2KB style.css 774B index.html 486B config.rb 752B资源评论
