秒表动画效果-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.........完整代码请登录后点击上方下载按钮下载查看