当前位置：首页 > 网页特效 > 日期和时间

html5 svg简单的模拟时钟特效

分类：日期和时间日期：2024-05-14 点击(1) 评论(0)

html5 svg简单的模拟时钟特效

简介

##### HTML结构
html结构中使用SVG path来模拟时钟的轮廓。

```html
<svg height="200" width="200" viewBox="0 0 1000 1000">
  <path d="M978,500c0,263.99-214.01,478-478,478s-478-214.01-478-478,214.01-478,478-478,478,214.01,478,478zm-888.93,237.25,20.179-11.65m779.16-449.85l22.517-13m-648.18,648.18,11.65-20.18m449.85-779.16l13-22.517m-711.75,410.93h23.305m899.7,0h26m-885.43-237.25,20.179,11.65m779.16,449.85,22.517,13m-648.18-648.18l11.652,20.183m449.85,779.16,13,22.517m-237.25-885.43v23.305m0,899.7,0,26"/>
  <path d="M500,500,500,236" id="hour"/>
  <path d="M500,500,500,120" id="min" />
  <path d="M500,500,500,90" id="sec" />
</svg>
```
##### CSS样式
插件中的CSS样式只是简单的渲染时钟的轮廓，给时针、分针和秒针添加不同的颜色。

```html
html {
  background: #0e2e3a;  
}
svg {
  position: absolute;
  top: 10%;
  width: 95%;
  height: 80%;
}
path {
  stroke: #09151b;
  stroke-linecap:round;
  stroke-width: 42;
  fill:none;
}
#sec {
  stroke: #6f7f24;
  stroke-width: 20;
}
#min {
  stroke: #3d601b;
  stroke-width: 38;
}
#hour {
  stroke: #13441e;
  stroke-width: 38;
}
```
##### JAVASCRIPT
是时钟动起来的js代码简单的使用js定时器来制作。

```html
setInterval(function() {
  function r(el, deg) {
    el.setAttribute('transform', 'rotate('+ deg +' 500 500)')
  }
  var d = new Date()
  r(sec, 6*d.getSeconds())  
  r(min, 6*d.getMinutes())
  r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
}, 1000)
```

web299.com

html5 svg简单的模拟时钟特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果