|
|

楼主 |
发表于 2022-3-20 14:01
|
显示全部楼层
全部代码:
<style type="text/css">
.numClock {
margin: auto;
width: 20em;
height: 20em;
background: rgba(240, 248, 255, .6);
border: 1.2em solid #2f4f4f;
border-radius: 50%;
position: relative;
}
.numClock::before {
content: "CHUACHAO";
position: absolute;
width: 100%;
text-align: center;
top: 70%;
}
.numBox {
position: absolute;
width: 1.5em;
height: 1.5em;
font-family: 'Microsoft Yahei', Sans-Seri;
font-size: 1.5em;
left: calc(50% - 0.75em);
top: calc(50% - 0.75em);
background: transparent;
text-align:center;
}
.numBox span { display: inline-block; }
.hHand, .mHand, .sHand { position: absolute; width: 100%; height: 100%; background: transparent;}
.hr-hand, .min-hand, .sec-hand {
position: absolute;
bottom: 50%;
transform-origin: 50% 100%;
}
.hr-hand {
background: #2f4f4f;
width: 0.4em;
height: 30%;
left: calc(50% - 0.2em);
animation: tRun 43200s linear infinite;
}
.hr-hand::after {
content: "";
position: absolute;
width: 0; height: 0;
border: 0.5em solid;
border-color: transparent transparent #2f4f4f transparent;
right: -0.3em;
bottom: 100%;
}
.min-hand {
background: #2f4f4f;
width: 0.3em;
height: 42%;
left: calc(50% - 0.15em);
animation: tRun 3600s linear infinite;
}
.sec-hand {
background: #d00;
width: 0.2em;
height: 48%;
left: calc(50% - 0.1em);
border-radius: 60% 60% 20% 20%;
animation: tRun 60s linear infinite;
}
.sec-hand::before {
content: "";
position: absolute;
bottom: -0.3em;
left: -0.3em;
width: 0.8em;
height: 0.8em;
border-radius: 50%;
background: red;
}
@keyframes tRun { to { transform: rotate(1turn); } }
</style>
<div class="numClock">
<div class="hHand">
<div class="hr-hand"></div>
</div>
<div class="mHand">
<div class="min-hand"></div>
</div>
<div class="sHand">
<div class="sec-hand"></div>
</div>
</div>
<script language="javascript">
var now = new Date();
var hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds(),
msec = now.getMilliseconds();
var hDeg = hr * 30 + (min * 6 / 12),
mDeg = min * 6 + (sec * 6 / 60),
sDeg = sec * 6 + (msec * 0.36 / 1000);
addNum();
godPush("hHand", hDeg);
godPush("mHand", mDeg);
godPush("sHand", sDeg);
function godPush(ele, deg) {
document.querySelector("." + ele).style.transform = "rotate(" + deg + "deg)";
}
function addNum() {
var nStr = "";
for(j=0; j<12; j++) {
nStr += "<div class='numBox' style='transform: rotate(" + j*30 + "deg) translateY(-5.8em);'><span style='transform: rotate(-" + j*30 + "deg);'>" + (j == 0 ? "12" : j) + "</span></div>";
}
document.querySelector(".numClock").innerHTML = nStr + document.querySelector(".numClock").innerHTML;
}
</script>
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|