秒表动画效果-html代码-BFW代码库

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/jquery-ui-1.11.0.min">
<style>
.container-clock {
  width: 10em;
  height: 10em;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  margin: auto;
}
#clock {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  top: 0;
  margin: auto;
}
#clock .actived {
  fill: #00DDFF;
}
.timer {
  position: absolute;
  top: 3.1em;
  left: 2.5em;
  font-size: 1.6em;
  color: #FFFFFF;
  letter-spacing: 0.3em;
}
.animated {
  animation: 0.5s animated-clock forwards;
}
@keyframes animated-clock {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

</head>
<body translate="no">
<div class="container-clock animated">
<svg version="1.0" id="clock" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 265.15 322.91" xml:space="preserve"><style>.st1{fill:#003154}.st3{fill:#fff}.st35{fill:#005b87}.st36{fill:#004d73}</style><circle cx="132.06" cy="188.81" r="87.3" fill="none" /><circle class="st1" cx="132.06" cy="188.81" r="113.39" /><defs><circle id="SVGID_1_" transform="rotate(-45.001 132.076 188.831)" cx="132.08" cy="188.83" r="111.49" /></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" overflow="visible" /></clipPath><g clip-path="url(#SVGID_2_)"><path class="st3" d="M26.56 191.98c0-59.92 48.75-108.67 108.67-108.67S243.9 132.06 243.9 191.98s-48.75 108.67-108.67 108.67c-59.92.01-108.67-48.74-108.67-108.67zm-5.45 0c0 62.93 51.2 114.13 114.13 114.13 62.93 0 114.13-51.2 114.13-114.13 0-62.93-51.2-114.13-114.13-114.13-62.94.01-114.13 51.21-114.13 114.13z" /><path d="M26.32 191.88c0-60 48.81-108.81 108.81-108.81s108.81 48.81 108.81 108.81-48.81 108.81-108.81 108.81S26.32 251.88 26.32 191.88zm-5.46 0c0 63.01 51.26 114.27 114.27 114.27S249.4 254.89 249.4 191.88 198.14 77.61 135.13 77.61c-63.01.01-114.27 51.27-114.27 114.27z" fill="#fafcfd" /><path d="M26.09 191.78c0-60.07 48.87-108.94 108.94-108.94s108.94 48.87 108.94 108.94-48.87 108.94-108.94 108.94S26.09 251.85 26.09 191.78zm-5.47 0c0 63.09 51.32 114.41 114.41 114.41 63.09 0 114.41-51.32 114.41-114.41 0-63.08-51.32-114.41-114.41-114.41-63.09 0-114.41 51.33-114.41 114.41z" fill="#f6f9fa" /><path d="M25.85 191.68c0-60.15 48.93-109.08 109.08-109.08s109.08 48.93 109.08 109.08-48.93 109.08-109.08 109.08S25.85 251.82 25.85 191.68zm-5.47 0c0 63.16 51.39 114.55 114.55 114.55s114.55-51.39 114.55-114.55S198.09 77.13 134.93 77.13c-63.17 0-114.55 51.39-114.55 114.55z" fill="#f1f6f8" /><path d="M25.61 191.58c0-60.22 48.99-109.21 109.21-109.21 60.22 0 109.21 48.99 109.21 109.21 0 60.22-48.99 109.21-109.21 109.21-60.21 0-109.21-48.99-109.21-109.21zm-5.48 0c0 63.24 51.45 114.69 114.69 114.69 63.24 0 114.69-51.45 114.69-114.69 0-63.24-51.45-114.69-114.69-114.69-63.24 0-114.69 51.45-114.69 114.69z" fill="#ecf3f5" /><path d="M25.38 191.48c0-60.29 49.05-109.35 109.35-109.35 60.29 0 109.35 49.05 109.35 109.35 0 60.29-49.05 109.35-109.35 109.35-60.3-.01-109.35-49.06-109.35-109.35zm-5.49 0c0 63.32 51.51 114.83 114.83 114.83s114.83-51.51 114.83-114.83S198.04 76.65 134.72 76.65C71.4 76.64 19.89 128.16 19.89 191.48z" fill="#e8f0f3" /><path d="M25.14 191.37c0-60.37 49.11-109.48 109.48-109.48 60.37 0 109.48 49.11 109.48 109.48 0 60.37-49.11 109.48-109.48 109.48-60.37.01-109.48-49.11-109.48-109.48zm-5.49 0c0 63.4 51.58 114.98 114.98 114.98 63.4 0 114.98-51.58 114.98-114.98 0-63.4-51.58-114.98-114.98-114.98-63.41.01-114.98 51.59-114.98 114.98z" fill="#e3edf0&q.........完整代码请登录后点击上方下载按钮下载查看