动态钟表动画 CSS

废话不多说，直接上代码！！！
效果图

methods:{timepiece(){//获取当前的时分秒let date=new Date();let hours=date.getHours();//获取小时let minutes=date.getMinutes();//获取分钟let seconds=date.getSeconds();//获取秒//获取时分秒所在的角度let hoursDeg=((hours*3600+60*minutes+seconds)/(3600*12))*360;//获取时针的角度let minutesDeg=((minutes*60+seconds)/3600)*360;//获取分针的角度let secondsDeg=(360/60)*seconds;//获取秒针的角度let styleSheets= document.styleSheets[0];//获取样式列表（此处需要找到你样式所在列表，也可以循环遍历，如图一）//时针styleSheets.insertRule("@keyframes timepiece {0%{transform: rotate(" +hoursDeg+"deg);}100%{transform: rotate(" +(hoursDeg+360)+"deg);}}");//分针styleSheets.insertRule("@keyframes timepiece1 {0%{transform: rotate(" +minutes+"deg);}100%{transform: rotate(" +(minutes+360)+"deg);}}");//秒针styleSheets.insertRule("@keyframes timepiece2 {0%{transform: rotate(" +seconds+"deg);}100%{transform: rotate(" +(seconds+360)+"deg);}}");}
}

最后在样式中添加
时针
animation: timepiece 86400s linear infinite;
分针
animation: timepiece1 3600s linear infinite;
秒针
animation: timepiece2 60s infinite steps(60);
设置旋转的中心点为中间底部
transform-origin: center bottom;

动态钟表动画 CSS相关推荐

粒子背景php,Particles.js实现粒子动态背景动画
这次给大家带来Particles.js实现粒子动态背景动画,Particles.js实现粒子动态背景动画的注意事项有哪些,下面就是实战案例,一起来看一下. 操作过程: 网上有基本流程,可以参考一下,不 ...
有趣的HTML实例（八）一个很有趣的动态背景（css+js）
小时候,谁都觉得自己的未来闪闪发光,不是吗?但是一旦长大,没有一件事会遂自己心愿. --<被嫌弃的松子的一生> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显 ...
手写动画css jss_用手写笔生成CSS网格
手写动画css jss I've jumped into Stylus over the past few moths and I love it. I wouldn't say it's bett ...
R语言gganimate包创建可视化gif动图、可视化动图：创建动态散点图动画基于transition_time函数、使用shadow_wake函数配置动画的渐变效果（gradual falloff）
R语言gganimate包创建可视化gif动图.可视化动图:创建动态散点图动画基于transition_time函数.使用shadow_wake函数配置动画的渐变效果(gradual falloff) ...
WPF路径动画(动态逆向动画)
WPF 中的Path.Data 不再多介绍,M开始坐标点 C弧度坐标点 L 直线坐标点 <Path x:Name="path0" Data="M 10,100 C ...
nginx实现动态分离,解决css和js等图片加载问题
nginx实现动态分离,解决css和js等图片加载问题参考文章: (1)nginx实现动态分离,解决css和js等图片加载问题 (2)https://www.cnblogs.com/sz-jack/ ...
ASP.NET以编程的方式动态的添加Css引用
使用的类 HtmlLink HtmlLink类的作用是:以编程的方式访问服务器上的html元素注意:head必须为服务器控件 ,即 <head id="head1" run ...
3D风车动画CSS HTML代码
下载地址 3D风车动画CSS HTML代码,风车样式是用css和div构造的. dd:
R语言ggplot2可视化：gganimate包transition_time函数创建动态散点图动画(gif)、shadow_wake函数配置动画的渐变效果（gradual falloff）拖尾效应
R语言ggplot2可视化:gganimate包基于transition_time函数创建动态散点图动画(gif).使用shadow_wake函数配置动画的渐变效果(gradual falloff)形 ...

动态钟表动画 CSS

动态钟表动画 CSS相关推荐

最新文章

热门文章