HTML简易时钟教程,html5 svg简单的模拟时钟特效-HTML5动画

这是一款代码非常简洁的html5 svg模拟时钟特效插件。该插件通过简单的SVG图形来模拟时钟轮廓，然后使用JS代码让时钟动起来。你想查看jQuery版本的数字电子时钟的制作方法可以查看：使用JQUERY和CSS3制作逼真的数字时钟效果。html5版本带闹钟功能的数字电子时钟可以查看：html5超逼真带定时功能的电子数字时钟。

HTML结构

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

CSS样式

插件中的CSS样式只是简单的渲染时钟的轮廓，给时针、分针和秒针添加不同的颜色。

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定时器来制作。

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)

HTML简易时钟教程,html5 svg简单的模拟时钟特效-HTML5动画相关推荐

即学即会---简单易学模拟时钟（html +css +js）
简单易学模拟时钟(基于html,css,js) 有黑夜和白天两种效果,可自行切换. 当然你也可以点击这里看看效果demo效果
火箭月亮html5游戏,HTML5 svg和CSS3炫酷火箭升空动画特效
这是一款HTML5 svg和CSS3炫酷火箭升空动画特效.该特效的火箭使用SVG来实现,并通过CSS3动画来实现火箭的动画特效. 使用方法 HTML结构 CSS样式 body { background ...
HTML5 SVG彩色斑点缓缓落下背景动画js特效
下载地址 HTML5 SVG彩色斑点缓缓落下背景动画特效是一款漂亮唯美的彩色斑点雨落下动画特效. dd:
html5 svg画钟表,html5 svg创意卡通粒子时钟动画特效
非常简单可爱的一款html5 svg绘制的创意卡通粒子时钟动画特效,时钟走动指针动画非常有意思. 查看演示下载资源: 12 次下载资源下载积分: 20 积分 js代码 // Utilities ...
html爆炸效果,HTML5 SVG炫酷文字爆炸特效
这是一款使用html5 svg.css3和js制作的炫酷文字爆炸特效.不论是HTML还是CSS都没有能力将文字分割成小块,但是SVG可以实现这个效果. 制作SVG文字可以使用矢量图制作工具,如Ado ...
开发html5的共享单车,HTML5 SVG 共享单车（小蓝车）动画
HTML 导入代码模板: .cls-1 { fill: url(#linear-gradient); } .cls-2 { fill: url(#linear-gradient-2); } .cls- ...
伤害世界服务器连接失败_伤害世界服务器简易架设教程
伤害世界服务器简易架设教程那么很简单,首先需要大家做的就是下载我们的服务器文件,这个文件在哪里呢,我们就直接在steam下载即可直接下载即可,这就是服务端文件了下载完毕后,它会在以上steam里 ...
使用 HTML、CSS 和 JavaScript 制作模拟时钟(初学者教程)
在线演示地址:https://haiyong.site/demo/clock1.html 文章目录步骤1:创建制作此时钟的基本结构步骤2:使用 CSS 代码设计背景步骤3:使用 CSS 代码设计 ...
html流程svg动画,html5 svg动画
以上是svg的一个线上编辑器,也可以adobe Illustrator制作生成. 我们通过以上编辑器可以获得以下代码. 例: Layer 1 给路径path 添加 class 为 path1 .pat ...

HTML简易时钟教程,html5 svg简单的模拟时钟特效-HTML5动画

HTML简易时钟教程,html5 svg简单的模拟时钟特效-HTML5动画相关推荐

最新文章

热门文章