html5 基于svg绘制多个圆形的圈圈旋转时钟动画特效。

使用方法

1、head引入css文件

<link rel="stylesheet" href="css/style.css">

2、body引入HTML代码

<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>

资源出处：https://www.moyublog.com/codes/7036.html