css动画学习——钟表clock
2018-02-16 本文已影响0人
Jassi
这是一个采用CSS动画 绘制钟表的练习，代码如下
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>clock</title>
</head>
<body>
<div id="clock">
<ul class="grid"></ul>
<div id="seconds"></div>
<div id="minute"></div>
<div id="hour"></div>
</div>
</body>
</html>
css
body {
font-size: 0;
margin: 0;
padding: 0;
}
@keyframes rotate {
from {
transform: rotate(-180deg)
}
to {
transform: rotate(180deg)
}
}
#clock {
margin: 0;
padding: 0;
box-sizing: border-box;
width: 200px;
height: 200px;
border: 2px solid;
border-radius: 50%;
}
#seconds,
#minute,
#hour {
position: absolute;
left: 100px;
top: 100px;
box-sizing: border-box;
}
#seconds,
#minute,
#hour {
border-radius: 30% 50% 50% 30%;
}
#seconds {
width: 80px;
border: 1px solid black;
transform-origin: center left;
animation: rotate 6s infinite linear;
}
#minute {
width: 60px;
border: 2px solid black;
transform-origin: center left;
animation: rotate 36s infinite linear;
}
#hour {
width: 40px;
border: 3px solid black;
transform-origin: center left;
animation: rotate 72s infinite linear
}
.grid {
position: absolute;
left: 100px;
padding: 0
}
.grid>li {
display: inline-block;
border: 1px solid red;
height: 5px;
list-style-type: none;
position: absolute;
transform-origin: 0 99px;
}
li.main {
height: 10px
}
js
var grid = document.getElementsByClassName("grid")[0];
var fragment = document.createDocumentFragment();
for (let i = 0; i < 60; i++) {
let newGrid = grid.cloneNode(true);
let node = document.createElement('li');
node.innerHTML = i;
node.setAttribute("style", "transform:rotate(" + 6 * i + "deg)");
if (!(i % 5)) {
node.setAttribute("class", "main")
}
console.log(node.getAttribute('style'));
console.log(node.innerHTML);
fragment.appendChild(node);
}
grid.appendChild(fragment);
