效果:
描述:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#outLine{
width: 300px;
height: 300px;
border-radius: 300px;
background-color: beige;
position: relative;
}
#inLine
{
width: 280px;
height: 280px;
position: absolute;
border-radius: 280px;
background-color: white;
left:10px;
top: 10px;
}
#inLine div:not([id])
{
width: 280px;
height: 30px;
position: absolute;
top:125px;
transform-origin: 140px 15px;
}
.begin
{
width: 30px;
float: right;
line-height: 30px;
text-align: center;
}
.end
{
text-align: center;
width: 30px;
float: left;
line-height: 30px;
}
#inLine div:nth-child(1)
{
transform: rotate(-90deg);
}
#inLine div:nth-child(2)
{
transform: rotate(-60deg);
}
#inLine div:nth-child(3)
{
transform: rotate(-30deg);
}
#inLine div:nth-child(5)
{
transform: rotate(30deg);
}
#inLine div:nth-child(6)
{
transform: rotate(60deg);
}
#inLine div:first-child span
{
transform: rotate(90deg);
}
#hour,#minute,#second
{
width: 100px;
height: 10px;
transform-origin: 0px 5px;
background-color: chartreuse;
transform: rotate(-90deg);
position: absolute;
left: 140px;
top:135px;
}
</style>
</head>
<body>
<div id="outLine">
<div id="inLine">
<div><span class="begin">12</span><span class="end">6</span></div>
<div><span class="begin">1</span><span class="end">7</span></div>
<div><span class="begin">2</span><span class="end">8</span></div>
<div><span class="begin">3</span><span class="end">9</span></div>
<div><span class="begin">4</span><span class="end">10</span></div>
<div><span class="begin">5</span><span class="end">11</span></div>
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
</div>
</body>
<script>
init();
function init() {
setInterval(animation,16);
}
function animation() {
var seconds=0;
var minutes=0;
var hours=0;
var second=document.querySelector("#second");
var minute=document.querySelector("#minute");
var hour=document.querySelector("#hour");
var date=new Date();
seconds=date.getSeconds()*6-90+date.getMilliseconds()*(6/1000);
second.style.transform="rotate("+seconds+"deg)";
minutes=date.getMinutes()*6-90+date.getSeconds()*(6/60);
minute.style.transform="rotate("+minutes+"deg)";
hours=date.getHours()*30-90+date.getMinutes()*(30/60)+date.getSeconds()*(30/3600);
hour.style.transform="rotate("+hours+"deg)"
}
</script>
</html>