介绍 & lt; !DOCTYPE html>
& lt; html>
& lt;头lang=癳n"祝辞
& lt;元charset=癠TF-8"祝辞
& lt; title>时针转动& lt;/title>
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;
& lt; style>
* {
保证金:0;
填充:0;
}
的身体,
html {
高度:100%;
宽度:100%
}
.t1 {
宽度:100%;
高度:100%;
背景图片:径向渐变(椭圆在50%—70%之间,hsla(240年,1%,90%,1),hsla(225年,8%,28%,1));
}
.t2 {
位置:相对;
宽度:100%;
高度:100%;
背景图片:径向渐变(farthest-side椭圆在50%—70%之间,hsla(210年,1%、78%、0.73)100 px, rgba (150、150、150、0.7) 400 px, hsla(225年,4%、18%、0.8)100%);
z - index: 3;
}
.t3 {
位置:绝对的;
左:50%;
margin-left: -175 px;
上图:30%;
身高:350 px;
宽度:350 px;
border - radius: 60 px;
背景:# fff;
背景图片:线性渐变(40 # ffffff px, # ddecf2 210 px, # d3e3e9);
}
.t3:{之前
内容:““;
位置:绝对的;
不必:0 px 4 px 3 px 3 px # b8bdca插图;
border - radius: 60 px;
透明度:0.6;
高度:100%;
宽度:100%;
-webkit-filter:模糊(1 px);
z - index: 2;
}
.t3:{后
内容:““;
高度:17 px;
宽度:300 px;
位置:绝对的;
上图:97%;
margin-left: 25 px;
背景:# 2 a2a2b;
-webkit-filter:模糊(7 px);/* Chrome, Opera */z - index: 1;
}
.t4 {
位置:相对;
保证金:71 px;
宽度:210 px;
身高:210 px;
这个特性:50%;
背景图片:线性渐变(# f9fdff, # d9eaf8);
不必:0 px 0 px 28 px 8 px # eaf7fb;
z - index: 11;
字体大小:20 px;
；
颜色:# 8 da6b8;
字体类型:Arial;
}
.t4我{
字体样式:正常
}
.hour {
位置:绝对的;
}
.hour3 {
右:30 px;
上图:50%;
margin-top: 7 px;
}
.hour6 {
左:50%;
底部:27 px;
margin-left: 5 px;
}
.hour9 {
左:30 px;
上图:50%;
margin-top: 7 px;
}
.hour12 {
左:50%;
上图:30 px;
margin-left: -10 px;
}
.t4:{之前
内容:““;
位置:绝对的;
宽度:210 px;
身高:210 px;
这个特性:50%;
不必:0 px 15 px 24 px 5 px # 7 a8fae;
z - index: 10;
}
.t4:{后
内容:““;
左:0 px;
上图:0 px;
位置:绝对的;
宽度:210 px;
身高:210 px;
这个特性:50%;
不必:0 px 4 px 4 px 1 px # 7 a8fae;
z - index: 9;
}
#苗,
#沼泽,
施# {
位置:绝对的;
左:50%;
身高:210 px;
宽度:10 px;
margin-left: 5 px;
}
#苗族{
z - index: 23;
}
#分{
z - index: 22;
}
施# {
z - index: 21;
}
#史:{后
内容:““;
高度:60 px;
宽度:6 px;
位置:绝对的;
上图:60 px;
左:2 px;
背景:# 1 aa9d8;
border - radius: 8 px 8 px 8 px 8 px;
z - index: 1;
}
#沼泽:{后
内容:““;
身高:65 px;
宽度:4 px;
位置:绝对的;
上图:60 px;
左:3 px;
背景:# 23 bcef;
border - radius: 8 px 8 px 8 px 8 px;
z - index: 1;
}
#苗:{后
内容:““;
身高:80 px;
宽度:1 px;
位置:绝对的;
上图:48 px;
左:4 px;
背景:# 0 dc1fd;
z - index: 1;
}
{#点
位置:绝对的;
左:50%;
上图:50%;
宽度:16 px;
高:16 px;
margin-left: 8 px;
margin-top: 8 px;
z - index: 999;
这个特性:50%;
不必:0 px 3 px 8 px 1 px # 0 f4873;
}
#点:之前,
#点:{后
内容:““;
高度:10 px;
宽度:10 px;
位置:绝对的;
上图:0%;
背景:# 8 ba3b6;
这个特性:50%;
z - index: 1;
}
#点:{之前
宽度:16 px;
高:16 px;
}
#点:{后
背景:# cee3ec;
左:3 px;
上图:3 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=皌2"祝辞
& lt; !——时钟的盒子——比;
& lt; div类=皌3"祝辞
& lt; !——时钟区域——比;
& lt; div类=皌4"祝辞
& lt; !——数值——比;
hour3" & lt;我类=靶∈?在3 & lt;/i>
hour6" & lt;我类=靶∈?在6 & lt;/i>
hour9" & lt;我类=靶∈?在9 & lt;/i>
hour12" & lt;我类=靶∈?在12 & lt;/i>
& lt; !——时分秒的转轴——比;
& lt; div id=癿iao"祝辞& lt;/div>
& lt; div id=癴en"祝辞& lt;/div>
& lt; div id=皊hi"祝辞& lt;/div>
& lt; !——小圆点——比;
& lt; div id=皃oint"祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;脚本类型=拔谋?javascript"比;//获取元素
施var=document.querySelector(& # 39; #史# 39;);
var分=document.querySelector(& # 39; #沼泽# 39;);
var苗族=document.querySelector(& # 39; #苗族# 39;);
setInterval(函数(){
var nowDate=new日期();//获取时分秒
乏时=nowDate.getHours ();
var分钟=nowDate.getMinutes ();
var第二=nowDate.getSeconds ();
var houerTw=% 12 * 30小时;
var minuteTW=分钟* 6;
var secondTW=第二* 6;
console.log (houerTw);//变量在拼接是要注意不能加入空格
shi.style。变换=& # 39;旋转(& # 39;+ houerTw + & # 39;度)& # 39;;
fen.style。变换=& # 39;旋转(& # 39;+ minuteTW + & # 39;度)& # 39;;
miao.style。变换=& # 39;旋转(& # 39;+ secondTW + & # 39;度)& # 39;;
},1000)
& lt;/script>
& lt;/body>
& lt;/html>
利用javascript编写一个实现时钟动画香港?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
具体内容如下
