秒表动画效果-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="#a7c6d0" /><path d="M21.83 189.95c0-61.41 49.96-111.37 111.37-111.37 61.41 0 111.37 49.96 111.37 111.37 0 61.41-49.96 111.37-111.37 111.37-61.41 0-111.37-49.96-111.37-111.37zm-5.59 0c0 64.49 52.47 116.96 116.96 116.96s116.96-52.47 116.96-116.96S197.69 72.99 133.2 72.99 16.24 125.46 16.24 189.95z" fill="#a2c3ce" /><path d="M21.59 189.85c0-61.48 50.02-111.51 111.51-111.51s111.5 50.02 111.5 111.51c0 61.48-50.02 111.51-111.51 111.51s-111.5-50.03-111.5-111.51zm-5.6 0c0 64.57 52.53 117.1 117.1 117.1s117.1-52.53 117.1-117.1-52.53-117.1-117.1-117.1c-64.56 0-117.1 52.53-117.1 117.1z" fill="#9dc0cb" /><path d="M21.35 189.74c0-61.56 50.08-111.64 111.64-111.64s111.64 50.08 111.64 111.64-50.08 111.64-111.64 111.64S21.35 251.3 21.35 189.74zm-5.6 0c0 64.65 52.59 117.24 117.24 117.24 64.65 0 117.24-52.59 117.24-117.24 0-64.65-52.59-117.24-117.24-117.24-64.64 0-117.24 52.6-117.24 117.24z" fill="#99bdc9" /><path d="M21.12 189.64c0-61.63 50.14-111.78 111.78-111.78S244.68 128 244.68 189.64c0 61.63-50.14 111.78-111.78 111.78S21.12 251.28 21.12 189.64zm-5.61 0c0 64.73 52.66 117.38 117.38 117.38s117.38-52.66 117.38-117.38c0-64.73-52.66-117.38-117.38-117.38S15.51 124.92 15.51 189.64z" fill="#94bac6" /><path d="M20.88 189.54c0-61.71 50.2-111.91 111.91-111.91s111.91 50.2 111.91 111.91c0 61.71-50.2 111.91-111.91 111.91S20.88 251.25 20.88 189.54zm-5.62 0c0 64.8 52.72 117.53 117.53 117.53s117.53-52.72 117.53-117.53c0-64.8-52.72-117.53-117.53-117.53S15.26 124.74 15.26 189.54z" fill="#8fb7c4" /><path d="M20.64 189.44c0-61.78 50.26-112.05 112.05-112.05s112.05 50.26 112.05 112.05c0 61.78-50.26 112.05-112.05 112.05S20.64 251.22 20.64 189.44zm-5.62 0c0 64.88 52.79 117.67 117.67 117.67s117.67-52.79 117.67-117.67S197.57 71.77 132.69 71.77 15.02 124.56 15.02 189.44z" fill="#8bb4c1" /><path d="M20.41 189.34c0-61.86 50.32-112.18 112.18-112.18s112.18 50.32 112.18 112.18c0 61.86-50.32 112.18-112.18 112.18S20.41 251.19 20.41 189.34zm-5.63 0c0 64.96 52.85 117.81 117.81 117.81S250.4 254.3 250.4 189.34c0-64.96-52.85-117.81-117.81-117.81S14.78 124.38 14.78 189.34z" fill="#86b1bf" /><path d="M20.17 189.24c0-61.93 50.38-112.32 112.32-112.32S244.8 127.3 244.8 189.24c0 61.93-50.38 112.32-112.32 112.32S20.17 251.17 20.17 189.24zm-5.64 0c0 65.04 52.91 117.95 117.95 117.95s117.95-52.91 117.95-117.95S197.52 71.29 132.48 71.29 14.53 124.2 14.53 189.24z" fill="#81aebc" /><path d="M19.93 189.13c0-62.01 50.45-112.45 112.45-112.45s112.45 50.45 112.45 112.45c0 62.01-50.45 112.45-112.45 112.45S19.93 251.14 19.93 189.13zm-5.64 0c0 65.12 52.98 118.09 118.09 118.09s118.09-52.98 118.09-118.09c0-65.12-52.98-118.09-118.09-118.09S14.29 124.02 14.29 189.13z" fill="#7dabba" /><path d="M19.7 189.03c0-62.08 50.51-112.59 112.59-112.59s112.59 50.51 112.59 112.59c0 62.08-50.51 112.59-112.59 112.59S19.7 251.11 19.7 189.03zm-5.65 0c0 65.19 53.04 118.23 118.23 118.23s118.23-53.04 118.23-118.23S197.47 70.8 132.28 70.8 14.05 123.84 14.05 189.03z" fill="#78a8b7" /><path d="M19.46 188.93c0-62.15 50.57-112.72 112.72-112.72S244.9 126.78 244.9 188.93s-50.57 112.72-112.72 112.72S19.46 251.08 19.46 188.93zm-5.66 0c0 65.27 53.1 118.38 118.38 118.38s118.38-53.1 118.38-118.38c0-65.27-53.1-118.38-118.38-118.38S13.8 123.66 13.8 188.93z" fill="#73a5b5" /><path d="M19.22 188.83c0-62.23 50.63-112.86 112.86-112.86s112.86 50.63 112.86 112.86-50.63 112.86-112.86 112.86S19.22 251.06 19.22 188.83zm-5.66 0c0 65.35 53.17 118.52 118.52 118.52S250.6 254.18 250.6 188.83 197.43 70.31 132.08 70.31 13.56 123.48 13.56 188.83z" fill="#6fa2b2" /></g><g><circle transform="rotate(-45.001 132.076 188.83)" class="st35" cx="132.08" cy="188.83" r="79.25" /><path class="st1" d="M132.08 109.57h-.04v158.51h.04c43.77 0 79.25-35.48 79.25-79.25s-35.48-79.26-79.25-79.26z" /></g><g><path class="st1" d="M132.08 55.48c-14.74 0-26.74-12-26.74-26.74C105.34 14 117.33 2 132.08 2c14.74 0 26.74 12 26.74 26.74 0 14.74-12 26.74-26.74 26.74zm0-44.67c-9.89 0-17.93 8.04-.........完整代码请登录后点击上方下载按钮下载查看