<!DOCTYPE html>
<html>
<head>
<span style="white-space:pre"> </span><title>border</title>
<span style="white-space:pre"> </span><style type="text/css">
<span style="white-space:pre"> </span>*{
<span style="white-space:pre"> </span>margin:0;
<span style="white-space:pre"> </span>padding:0;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>.one{
<span style="white-space:pre"> </span>width:300px;
<span style="white-space:pre"> </span>height:300px;
<span style="white-space:pre"> </span>text-align: center;
<span style="white-space:pre"> </span>position:relative;
<span style="white-space:pre"> </span>background-color:yellow;
<span style="white-space:pre"> </span>top:50%;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-left:-150px;
<span style="white-space:pre"> </span>border-radius:100%;
<span style="white-space:pre"> </span>transition:all;
<span style="white-space:pre"> </span>-webkit-transition-duration: 3s;
<span style="white-space:pre"> </span>transition-duration: 3s;
<span style="white-space:pre"> </span>-webkit-transition-delay: .2s;
<span style="white-space:pre"> </span>transition-delay: .2s;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>.one span{
<span style="white-space:pre"> </span>display:inline-block;
<span style="white-space:pre"> </span>width:10px;
<span style="white-space:pre"> </span>height:10px;
<span style="white-space:pre"> </span>background-color:red;
<span style="white-space:pre"> </span>position:absolute;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#t0{
<span style="white-space:pre"> </span>top:0;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-left:-5px;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#t3{
<span style="white-space:pre"> </span>top:50%;
<span style="white-space:pre"> </span>right:0;
<span style="white-space:pre"> </span>margin-top:-5px;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#t6{
<span style="white-space:pre"> </span>bottom:0;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-left:-5px;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#t9{
<span style="white-space:pre"> </span>top:50%;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>margin-top:-5px;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#ss{
<span style="white-space:pre"> </span>width:4%;
<span style="white-space:pre"> </span>height:80%;
<span style="white-space:pre"> </span>top:10%;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-top:0%;
<span style="white-space:pre"> </span>margin-left:-2%;
<span style="white-space:pre"> </span>background-color:rgba(52, 52, 52, 0);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#ss .left{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:4%;
<span style="white-space:pre"> </span>top:0;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>background-color:green;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#ss .right{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:46%;
<span style="white-space:pre"> </span>background-color:orange;
<span style="white-space:pre"> </span>top:0;
<span style="white-space:pre"> </span>left:4%;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#ff{
<span style="white-space:pre"> </span>width:4%;
<span style="white-space:pre"> </span>height:90%;
<span style="white-space:pre"> </span>top:5%;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-left:-2%;
<span style="white-space:pre"> </span>background-color:rgba(52, 52, 52, 0);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#ff .shang{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:4%;
<span style="white-space:pre"> </span>top:0%;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>background-color:green;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#ff .xia{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:46%;
<span style="white-space:pre"> </span>top:4%;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>background-color:blue;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#mm{
<span style="white-space:pre"> </span>width:2%;
<span style="white-space:pre"> </span>height:92%;
<span style="white-space:pre"> </span>background-color:rgba(52, 52, 52, 0);
<span style="white-space:pre"> </span>top:4%;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-left:-1%;
<span style="white-space:pre"> </span>transform:rotate(0);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>#mm .qian{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:4%;
<span style="white-space:pre"> </span>top:1%;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>background-color:black;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#mm .hou{
<span style="white-space:pre"> </span>width:100%;
<span style="white-space:pre"> </span>height:46%;
<span style="white-space:pre"> </span>top:4%;
<span style="white-space:pre"> </span>left:0;
<span style="white-space:pre"> </span>background-color:pink;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>#zhong{
<span style="white-space:pre"> </span>width:10%;
<span style="white-space:pre"> </span>height:10%;
<span style="white-space:pre"> </span>border-radius:100%;
<span style="white-space:pre"> </span>top:50%;
<span style="white-space:pre"> </span>left:50%;
<span style="white-space:pre"> </span>margin-left:-5%;
<span style="white-space:pre"> </span>margin-top:-5%;
<span style="white-space:pre"> </span>background-color:greenyellow;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span></style>
</head>
<body>
<div class="one">
<span style="white-space:pre"> </span><span id="t0"></span>
<span style="white-space:pre"> </span><span id="t3"></span>
<span style="white-space:pre"> </span><span id="t6"></span>
<span style="white-space:pre"> </span><span id="t9"></span>
<span style="white-space:pre"> </span><span id="ss">
<span style="white-space:pre"> </span><span class="left"></span><span class="right"></span>
<span style="white-space:pre"> </span></span>
<span style="white-space:pre"> </span><span id="ff">
<span style="white-space:pre"> </span><span class="shang"></span><span class="xia"></span>
<span style="white-space:pre"> </span></span>
<span style="white-space:pre"> </span><span id="mm">
<span style="white-space:pre"> </span><span class="qian"></span><span class="hou"></span>
<span style="white-space:pre"> </span></span>
<span style="white-space:pre"> </span><span id="zhong"></span>
</div>
<script type="text/javascript">
<span style="white-space:pre"> </span>var oss = document.getElementById("ss");
<span style="white-space:pre"> </span>var off = document.getElementById("ff");
<span style="white-space:pre"> </span>var omm = document.getElementById("mm");
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>setInterval(text,1000);
function text(){
var a = new Date();
var b = a.getDay();
var d = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var c = a.getFullYear()+"年"+(a.getMonth()+1)+"月"+a.getDate()+"日"+a.getHours()+"时"+a.getMinutes()+"分"+a.getSeconds()+"秒";
var x = 6;
<span style="white-space:pre"> </span>var i = a.getSeconds();
<span style="white-space:pre"> </span>var j = a.getMinutes();
<span style="white-space:pre"> </span>var k = a.getHours();
<span style="white-space:pre"> </span>console.log(a.getHours());
<span style="white-space:pre"> </span>omm.style.transform = "rotate("+i*x+"deg)";
<span style="white-space:pre"> </span>off.style.transform = "rotate("+j*x+"deg)";
<span style="white-space:pre"> </span>oss.style.transform = "rotate("+k*30+"deg)";<span style="white-space:pre"> </span>
}
<span style="white-space:pre"> </span>
</script>
</body>
</html>
以上是代码,下面是效果: