秒表动画效果-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" /><path d="M24.9 191.27c0-60.44 49.17-109.62 109.62-109.62 60.44 0 109.62 49.17 109.62 109.62 0 60.44-49.17 109.62-109.62 109.62-60.44 0-109.62-49.18-109.62-109.62zm-5.5 0c0 63.48 51.64 115.12 115.12 115.12 63.48 0 115.12-51.64 115.12-115.12 0-63.48-51.64-115.12-115.12-115.12-63.48 0-115.12 51.65-115.12 115.12z" fill="#deeaee" /><path d="M24.67 191.17c0-60.52 49.23-109.75 109.75-109.75s109.75 49.23 109.75 109.75-49.23 109.75-109.75 109.75S24.67 251.69 24.67 191.17zm-5.51 0c0 63.55 51.7 115.26 115.26 115.26 63.55 0 115.26-51.7 115.26-115.26 0-63.55-51.7-115.26-115.26-115.26S19.16 127.62 19.16 191.17z" fill="#dae7eb" /><path d="M24.43 191.07c0-60.59 49.29-109.89 109.89-109.89 60.59 0 109.89 49.3 109.89 109.89s-49.3 109.89-109.89 109.89c-60.6 0-109.89-49.3-109.89-109.89zm-5.51 0c0 63.63 51.77 115.4 115.4 115.4s115.4-51.77 115.4-115.4-51.77-115.4-115.4-115.4c-63.64 0-115.4 51.77-115.4 115.4z" fill="#d5e4e9" /><path d="M24.19 190.97c0-60.67 49.36-110.02 110.02-110.02 60.67 0 110.02 49.36 110.02 110.02 0 60.67-49.36 110.02-110.02 110.02S24.19 251.63 24.19 190.97zm-5.52 0c0 63.71 51.83 115.54 115.54 115.54 63.71 0 115.54-51.83 115.54-115.54 0-63.71-51.83-115.54-115.54-115.54-63.71-.01-115.54 51.83-115.54 115.54z" fill="#d0e1e6" /><path d="M23.96 190.86c0-60.74 49.42-110.16 110.16-110.16 60.74 0 110.16 49.42 110.16 110.16 0 60.74-49.42 110.16-110.16 110.16-60.75 0-110.16-49.41-110.16-110.16zm-5.53 0c0 63.79 51.9 115.68 115.68 115.68 63.79 0 115.68-51.9 115.68-115.68 0-63.79-51.9-115.68-115.68-115.68-63.79 0-115.68 51.9-115.68 115.68z" fill="#ccdee4" /><path d="M23.72 190.76c0-60.81 49.48-110.29 110.29-110.29 60.82 0 110.29 49.48 110.29 110.29 0 60.82-49.48 110.29-110.29 110.29-60.81 0-110.29-49.47-110.29-110.29zm-5.53 0c0 63.87 51.96 115.83 115.83 115.83s115.83-51.96 115.83-115.83S197.89 74.93 134.02 74.93c-63.88.01-115.83 51.97-115.83 115.83z" fill="#c7dbe1" /><path d="M23.48 190.66c0-60.89 49.54-110.43 110.43-110.43 60.89 0 110.43 49.54 110.43 110.43 0 60.89-49.54 110.43-110.43 110.43-60.89 0-110.43-49.54-110.43-110.43zm-5.54 0c0 63.94 52.02 115.97 115.97 115.97 63.94 0 115.97-52.02 115.97-115.97 0-63.94-52.02-115.97-115.97-115.97-63.95 0-115.97 52.03-115.97 115.97z" fill="#c2d8df" /><path d="M23.25 190.56C23.25 129.6 72.84 80 133.81 80c60.96 0 110.56 49.6 110.56 110.56s-49.6 110.56-110.56 110.56c-60.97 0-110.56-49.6-110.56-110.56zm-5.55 0c0 64.02 52.09 116.11 116.11 116.11s116.11-52.09 116.11-116.11S197.83 74.45 133.81 74.45 17.7 126.54 17.7 190.56z" fill="#bed5dc" /><path d="M23.01 190.46c0-61.04 49.66-110.7 110.7-110.7 61.04 0 110.7 49.66 110.7 110.7 0 61.04-49.66 110.7-110.7 110.7-61.04-.01-110.7-49.66-110.7-110.7zm-5.55 0c0 64.1 52.15 116.25 116.25 116.25s116.25-52.15 116.25-116.25S197.81 74.21 133.71 74.21 17.46 126.36 17.46 190.46z" fill="#b9d2da" /><path d="M22.77 190.36c0-61.11 49.72-110.83 110.83-110.83s110.83 49.72 110.83 110.83-49.72 110.83-110.83 110.83S22.77 251.47 22.77 190.36zm-5.56 0c0 64.18 52.21 116.39 116.39 116.39s116.39-52.21 116.39-116.39S197.78 73.97 133.6 73.97c-64.17-.01-116.39 52.21-116.39 116.39z" fill="#b5cfd8" /><path d="M22.54 190.25c0-61.19 49.78-110.97 110.97-110.97s110.97 49.78 110.97 110.97-49.78 110.97-110.97 110.97S22.54 251.44 22.54 190.25zm-5.57 0c0 64.26 52.28 116.53 116.53 116.53 64.26 0 116.53-52.28 116.53-116.53 0-64.26-52.28-116.53-116.53-116.53S16.97 126 16.97 190.25z" fill="#b0ccd5" /><path d="M22.3 190.15c0-61.26 49.84-111.1 111.1-111.1 61.26 0 111.1 49.84 111.1 111.1 0 61.26-49.84 111.1-111.1 111.1-61.26 0-111.1-49.84-111.1-111.1zm-5.58 0c0 64.34 52.34 116.68 116.68 116.68s116.68-52.34 116.68-116.68c0-64.33-52.34-116.68-116.68-116.68-64.33.01-116.68 52.35-116.68 116.68z" fill="#abc9d3" /><path d="M22.06 190.05c0-61.34 49.9-111.24 111.24-111.24 61.34 0 111.24 49.9 111.24 111.24 0 61.34-49.9 111.24-111.24 111.24-61.34 0-111.24-49.9-111.24-111.24zm-5.58 0c0 64.41 52.4 116.82 116.82 116.82 64.41 0 116.82-52.4 116.82-116.82 0-64.41-52.4-116.82-116.82-116.82-64.41 0-116.82 52.41-116.82 116.82z" fill="#.........完整代码请登录后点击上方下载按钮下载查看