<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5 SVG创意圆圈旋转时钟动画特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="wrapper">
<svg version="1.1" id="clock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 142 142" enable-background="new 0 0 142 142" xml:space="preserve">
<style>
@import url("https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,600,700");
text { font-family: 'Lato'; font-weight: 400; }
</style>
<clipPath id="c1"><path d="M105.8,11C100.1,7.7,94,5.3,87.9,3.7c-0.5-0.2-0.9-0.3-1.3-0.3c-3.6-0.6-7.3,1.1-9.2,4.5
c-1.6,3-1.1,6.7,1,9.5c1.2,1.5,2.6,2.3,4.1,2.8c0.4,0.1,0.7,0.2,1,0.2c6.3,1.5,12.4,4.3,18,8.4c20.1,14.5,27,41.7,16.2,64.1
c-13.7,28.2-48.8,37.8-74.8,20.7C21.1,99.3,13.4,70.4,25.4,47.2c7.2-14.1,19.9-23.4,33.9-26.7c0.2,0,0.4-0.1,0.6-0.1
c2.5-0.7,4.7-2.6,5.7-5.3c1.3-3.4,0.1-7.4-2.7-9.8c-2.1-1.6-4.5-2.2-6.8-1.8c-0.5,0.1-1,0.2-1.5,0.3C36.8,8.2,20.6,19.8,10.9,37.5
c-18.1,33.1-5.9,75,27,93.4c32.8,18.3,74.2,6.9,93.1-25.7C150,72.1,138.8,30,105.8,11z" /></clipPath>
<clipPath id="c2"><path d="M95.1,103.7c16.6-12,21.6-34.8,11.7-52.7c-4.3-7.8-10.8-13.6-18.2-17.2c-0.1,0-0.2-0.1-0.3-0.1
c0,0-0.1-0.1-0.1,0c-2.9-1.3-6.3-0.9-9,1.5s-3.4,6.2-1.9,9.6c0.9,1.9,2.3,3.4,4.1,4.2c0.1,0.1,0.1,0,0.2,0.1l0,0
c4,1.9,7.6,5,10.1,9c7.1,11.4,3.2,27-8.5,33.6c-11.7,6.7-26.9,2.4-33.3-9.9c-4.4-8.7-3.1-19.4,3.2-26.8c2.3-2.6,4.8-4.5,7.6-5.9
c0,0,0,0,0.1-0.1l0.1-0.1c0.3-0.2,0.4-0.3,0.7-0.4c3.9-2.4,5.1-7.5,2.7-11.4c-2.3-3.7-6.8-4.9-10.6-3.2c-0.1,0.1-0.2,0.1-0.3,0.2
c-1.2,0.6-2.4,1.3-3.6,2c-19.1,11.9-24.9,37-13,56.1C49,112.1,75.7,117.6,95.1,103.7z" /></clipPath>
<text class="displayH f1" x="71" y="75" text-anchor="middle" style="font-size: 10px">00</text>
<g id="handH">
<ellipse class="f1" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -29.0876 71.0443)" cx="71.2" cy="70.6" rx="13.4" ry="13.3"/>
<text id="handTextH" class="displayH f2" x="71" y="75" text-anchor="middle" style="font-size: 10px">00</text>
</g>
<text class="displayM f1" x="103.5" y="75" text-anchor="middle" style="font-size: 10px">00</text>
<g id="handM" clip-path="url(#c2)">
<circle class="f1 circleM" cx="50%" cy="50%" r="71" />
<text id="handTextM" class="displayM f2" x="103.5" y="75" text-anchor="middle" style="font-size: 10px">00</text>
</g>
<text class="displayS f1" x="131.5" y="75" text-anchor="middle" style="font-size: 10px">00</text>
<g id="handS" clip-path="url(#c1)">
<circle class="f1 circleS" cx="50%" cy="50%" r="71" />
<text id="handTextS" class="displayS f2" x="131.5" y="75" text-anchor="middle" style="font-size: 10px">00</text>
</g>
</svg>
</div>
<script src='js/snap.svg-min.js'></script>
<script src="js/index.js"></script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="https://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
