HTML5 SVG指针式时钟走时特效

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG时钟走时图标特效</title>
<body>
<style>
body{
  margin:0;
  padding:0;
  background: #f1f1f1;
  text-align: center;
}
.icon{
  width: 32px;
  height: 32px;
  fill: #22A62B;
  animation: anima 30s ease-out infinite;
}
.icon.is-check{
  fill: #FE4365;
}
.icon.is-x10{
  width: 320px;
  height: 320px;
}
.icon.is-x2{
  width: 64px;
  height: 64px;
}
.icon.is-x3{
  width: 96px;
  height: 96px;
}
.icon.is-x4{
  width: 128px;
  height: 128px;
}
.icon.is-x5{
  width: 160px;
  height: 160px;
}
.icon.is-x6{
  width: 192px;
  height: 192px;
}
@keyframes anima {
	0% {fill: #22A62B;color: #22A62B;}	
  10% {fill: #14E3E6;color: #14E3E6;}
  20%{fill: #195BEF;color: #195BEF;}
  30%{fill: #DF26D9;color: #DF26D9;}
  40%{fill: #DF2688;color: #DF2688;}
  50%{fill: #FEA903;color: #FEA903;}
  60%{fill: #DF26DE;color: #DF26DE;}
  70%{fill: #2C4AED;color: #2C4AED;}
  80%{fill: #14E3F7;color: #14E3F7;}
  90%{fill: #195BEF;color: #195BEF;}
  100% {fill: #22A62B;}
}
.icon.is-delay-1s{
  animation-delay: .5s;
}
.icon.is-delay-2s{
  animation-delay: 1s;
}
.icon.is-delay-3s{
  animation-delay: 1.5s;
}
.icon.is-delay-4s{
  animation-delay: 2s;
}
.icon.is-delay-5s{
  animation-delay: 2.5s;
}
.icon.is-delay-6s{
  animation-delay: 3s;
}
.icon.is-delay-7s{
  animation-delay: 3.5s;
}
.icon.is-delay-8s{
  animation-delay: 4s;
}
.icon.is-delay-9s{
  animation-delay: 4.5s;
}
.icon.is-delay-10s{
  animation-delay: 5s;
}
.svg-time-b{
  margin-top: 100px;
  display: inline-block;
  min-width: 1360px;
}
.svg-time-b .icon + .icon{
  margin-left: 16px;
}
.svg-time-b > .text-be{
  font-size: 32px;
  color: white;
  font-family: monospace;
  margin-top: 32px;
  display: block;
  text-decoration: none;
  animation: anima 30s ease-out infinite;
  animation-delay: 2.5s;
  color: #22A62B;
  text-shadow: 4px 4px 3px rgba(0,0,0,.25);
  font-weight: bold;
}
</style>
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
<g id="clock-icon">
  <rect id="minute-hand" transform="rotate(0 16 17)" x="15.386" y="6.464" width="1.227" height="11.439"/>
<rect id="hour-hand" transform="rotate(0 16 17)" x="15.386" y="10.291" width="1.227" height="7.626"/>
  <rect id="second-hand" transform="rotate(0 16 17)" x="15.88" y="7.46"  width="0.24" height="9.83"/>
<path d="M15.879,2.531c-8.14,0-14.739,6.599-14.739,14.739c0,8.14,6.599,14.739,14.739,14.739s14.739-6.6,14.739-14.739
  C30.618,9.13,24.02,2.531,15.879,2.531z M15.879,30.852c-7.511,0-13.6-6.089-13.6-13.6c0-7.511,6.089-13.601,13.6-13.601  c7.511,0,13.6,6.089,13.6,13.601C29.479,24.763,23.391,30.852,15.879,30.852z"/>
<rect x="24.794" y="28.95" transform="matrix(0.7071 0.7071 -0.7071 0.7071 28.9921 -10.8671)"  width="5.639" height="1.226"/>
<rect x="1.076" y="28.866" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 27.6973 47.4864)" width="5.876" height="1.227"/>
<path  d="M9.946,1.291c-1.044-0.812-2.353-1.3-3.778-1.3C2.761-0.009,0,2.752,0,6.158c0,1.425,0.488,2.733,1.3,3.778
  l0.524-0.524l0.002,0.002l7.859-7.859L9.684,1.553L9.946,1.291z M6.167,1.198c0.634,0,1.233,0.132,1.79,0.35L1.558,7.948
  c-0.218-0.557-0.35-1.156-0.35-1.79C1.208,3.418,3.428,1.198,6.167,1.198z"/>
<path  d="M30.7,9.936C31.512,8.892,32,7.583,32,6.158c0-3.406-2.762-6.167-6.168-6.167
  c-1.425,0-2.733,0.488-3.777,1.3l0.524,0.524l-0.002,0.002l7.858,7.859l0.002-0.002L30.7,9.936z M30.793,6.158  c0,0.634-0.133,1.233-0.352,1.79l-6.398-6.399c0.557-0.218,1.156-0.35,1.789-0.35C28.572,1.198,30.793,3.418,30.793,6.158z"/>
<script type="text/javascript">
    (function(undefined){
      var setTime = function(){
      var date = new Date(),
      MINUTE = 60, HOUR   = 60*MINUTE,
      seconds = date.getSeconds(),
      minutes = (date.getMinutes()*MINUTE) + seconds,
      hours = (date.getHours()*HOUR)+minutes;
        document.getElementById('second-hand').setAttribute('transform', 'rotate('+360*(seconds/MINUTE)+',16,17)');
        document.getElementById('minute-hand').setAttribute('transform', 'rotate('+360*(minutes/HOUR)+',16,17)');
        document.getElementById('hour-hand').setAttribute('transform', 'rotate('+360*(hours/(12*HOUR))+',16,17)');
      }
    setTime();
    var interval = setInterval(setTime,1000);
    })();
</script>
</g>   
<filter id='color-shadow-2' data-iconmelon='filter:d8b3243222f113cd0dd357f0aaed2ee9' color-interpolation-filters="sRGB">
    <feComponentTransfer in="SourceGraphic">
      <feFuncR type="discrete" tableValues=".65"/>
      <feFuncG type="discrete" tableValues=".65"/>
      <feFuncB type="discrete" tableValues=".65"/>
    </feComponentTransfer>
    <feGaussianBlur stdDeviation=".5"/>
    <feOffset dx="1" dy="1" result="shadow"/>
    <feComposite in="SourceGraphic" in2="shadow" operator="over"/>
  </filter>
</svg>

<div class="svg-time-b">
<svg class="icon" viewBox="0 0 34 34">
  <g filter="url('#color-shadow-2')">
    <use xlink:href="#clock-icon"></use>
  </g>
</svg>
<svg class="icon is-x2 is-delay-1s" viewBox="0 0 34 34">
   <g filter="url('#color-shadow-2')">
    <use xlink:href="#clock-icon"></use>
  </g>
</svg>
<svg class="icon is-x3 is-delay-2s" viewBox="0 0 34 34">
   <g filter="url('#color-shadow-2')">
    <use xlink:href="#clock-icon"></use>
  </g>
</svg>
<svg class="icon is-x4 is-delay-3s" viewBox="0 0 34 34">
   <g filter="url('#color-shadow-2')">
    <use xlink:href="#clock-icon"></use>
  </g>
</svg>
<svg class="icon is-x5 is-delay-4s" viewBox="0 0 34 34">
   <g filter="url('#color-shadow-2')">
    <use xlink:href="#clock-icon"></use>
  </g>
</svg>
<svg class="icon is-x6 is-delay-5s" viewBox="0 0 34 34">
    <g filter="url('#color-shadow-2')">
    <use xlink:href="#clock-icon"></use>
  </g>
</svg>
<svg class="icon is-x5 is-delay-6s" viewBox="0 0 34 34">
  <g filter="url('#color-shadow-2')">
    <use xlink:href="#clock-icon"></use>
  </g>
</svg>
<svg class="icon is-x4 is-delay-7s" viewBox="0 0 34 34">
   <g filter="url('#color-shadow-2')">
    <use xlink:href="#clock-icon"></use>
  </g>
</svg>
<svg class="icon is-x3 is-delay-8s" viewBox="0 0 34 34">
  <g filter="url('#color-shadow-2')">
    <use xlink:href="#clock-icon"></use>
  </g>
</svg>
<svg class="icon is-x2 is-delay-9s" viewBox="0 0 34 34">
  <g filter="url('#color-shadow-2')">
    <use xlink:href="#clock-icon"></use>
  </g>
</svg>
<svg class="icon is-delay-10s" viewBox="0 0 34 34">
  <g filter="url('#color-shadow-2')">
    <use xlink:href="#clock-icon"></use>
  </g>
</svg>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

HTML5 SVG指针式时钟走时特效

分类

HTML5代码

描述

HTML5&SVG指针式时钟走时特效，HTML5时间特效，一共10个时钟，按秒走动演示的效果，基于SVG技术，研究SVG相关技术的可参考。