renderings
html code
Rationale and Explanation
renderings
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>钟表</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
.clock{
width: 300px;
height: 300px;
background: url(./view.jpg) center;
background-size: 138%;
border-radius: 50%;
border: 15px double rgb(92, 34, 34);
position: relative;
}
.clock > div{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.hour{
width: 40%;
height: 40%;
animation: run 43200s linear infinite;
}
.hour div{
width: 5px;
height: 50%;
background-color: #333;
margin: auto;
transform-origin:bottom;
}
.minute{
width: 50%;
height: 50%;
animation: run 3600s steps(60) infinite;
}
.minute div{
width: 3px;
height: 50%;
background-color: #333;
margin: auto;
transform-origin:bottom;
}
.second{
width: 55%;
height: 55%;
animation: run 60s steps(60) infinite;
}
.second div{
width: 3px;
height: 50%;
background-color: rgb(211, 24, 24);
margin: auto;
transform-origin:bottom;
}
.millisecond{
width: 60%;
height: 60%;
animation: run 1s steps(60) infinite;
}
.millisecond div{
width: 3px;
height: 50%;
background-color: rgb(24, 100, 56);
margin: auto;
transform-origin:bottom;
}
@keyframes run{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
</style>
<body>
<div class="clock">
<div class="hour">
<div></div>
</div>
<div class="minute">
<div></div>
</div>
<div class="second">
<div></div>
</div>
<div class="millisecond">
<div></div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload =function(){
moveTime();
// setInterval(moveTime,1000);
function moveTime(){
var hourNode =document.querySelector(".hour > div");
var minNode =document.querySelector(".minute > div");
var secNode =document.querySelector(".second > div");
var millisecNode =document.querySelector(".millisecond > div");
var date =new Date();
var sec =date.getSeconds();
var min =date.getMinutes();
var hour =date.getHours();
var milli = date.getMilliseconds();
hourNode.style.transform ="rotateZ("+(hour*30)+"deg)";
minNode.style.transform ="rotateZ("+(min*6)+"deg)";
secNode.style.transform ="rotateZ("+(sec*6)+"deg)";
millisecNode.style.transform ="rotateZ("+(milli*0.36)+"deg)";
}
}
</script>
</html>
Source code and explanation
keyframe keyframes
@keyframes run{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
这段代码是关键帧的代码，也就是说动画从Z轴为基准的角度从0旋转到360，回到起点animation animation
.second{
width: 55%;
height: 55%;
animation: run 60s steps(60) infinite;
}
animation的参数run是关键帧（keyframes）的方法，参数60s是说走完360度（1圈）需要用时60s（1分钟），即秒针走完一圈是60s（一分钟），参数steps是步数，即60步，一步一秒。infinite好像是让动画更真实
transform-origin:bottom;
这里的动画基准点是bottom，也就是底部。从左往右，左是底。右是上。我画的线条是右边围绕左边的原点转。所以参数是底部js code
<script type="text/javascript">
window.onload =function(){
moveTime();
// setInterval(moveTime,1000);
function moveTime(){
var hourNode =document.querySelector(".hour > div");
var minNode =document.querySelector(".minute > div");
var secNode =document.querySelector(".second > div");
var millisecNode =document.querySelector(".millisecond > div");
var date =new Date();
var sec =date.getSeconds();
var min =date.getMinutes();
var hour =date.getHours();
var milli = date.getMilliseconds();
hourNode.style.transform ="rotateZ("+(hour*30)+"deg)";
minNode.style.transform ="rotateZ("+(min*6)+"deg)";
secNode.style.transform ="rotateZ("+(sec*6)+"deg)";
millisecNode.style.transform ="rotateZ("+(milli*0.36)+"deg)";
}
}
</script>
这里的hourNode到millisecNode是针的节点，sec到milli是当前时间秒到毫秒，transform是当前改变值，rotateZ让指针旋转里面的角度值。一圈360度，12小时，每一小时是30度，所以时针应该转到hour*30角度，其他同理推得If you want the clock to run, you need to replace the view.jpg with your own clock background image