You need to reply to the [clock] from the public number at the end of the source code text, you can get the source code without talking nonsense and see the effect directly.
Because the code is too long, the following code is shown as part of the code
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3抖音网红文字时钟特效</title>
<link rel="stylesheet" href="css/commen.css">
<link rel="stylesheet" href="css/demo5.css">
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/rotate.js"></script>
<script src="js/numToChinese.js"></script>
<script src="js/demo5.js"></script>
</head>
<body>
<div class="clock">
<div class="second">
<ul></ul>
<div class="showRod"></div>
<div class="needle"></div>
</div>
<div class="minute">
<ul></ul>
</div>
<div class="hour">
<ul></ul>
</div>
<div class="day"></div>
</div>
<script>
window.onload = function(){
secondHtml();
}
</script>
</body>
</html>
css style code
common.css file
*{
margin: 0;padding: 0;
}
html,body{
font-family: "Microsoft YaHei UI";
}
a{
text-decoration: none;
}
span,em,b,i{
font-style: normal;
}
li{
list-style: none;
}
demo5.css file
html,body{
font-size: 62.5%;
background: #000;
}
.clock{
width: 700px;height: 700px;margin: 0 auto;position: relative;z-index: 6;padding-top: 50px;
}
.second{
width: 502px;height: 502px;position: absolute;left: 20px;top: 20px;
border-radius: 100%;
}
.second ul{
width: 500px;height: 500px;position: relative;z-index: 8;
border-radius: 100%;overflow: hidden;
background: #293C55;
/*transform: rotate(6deg);*/
}
.second ul li,.minute ul li,.hour ul li{
height: 60px;position: absolute;z-index: 9;width: 16px;text-align: center;display: table;
/*background: #273341;*/padding: 0 2px;
transform-origin: 10px 0;
}
.second ul li span,.minute ul li span,.hour ul li span{
display: table-cell;vertical-align: middle;width: 100%;height: 100%;font-size: 10px;color: #fff;
}
.minute{
width: 380px;height:380px;position: absolute;left: 80px;top: 80px;z-index: 14;border-radius: 100%;
transform: rotate(6deg);
background: #273341;
}
.hour{
width: 260px;height:260px;position: absolute;left: 140px;top: 140px;z-index: 14;border-radius: 100%;
background: #62778d;
}
.day{
width: 140px;height: 140px;position: absolute;left: 200px;top: 200px;z-index: 14;border-radius: 100%;
background: #293C55;
}
.showRod{
width: 20px;height: 250px;position: absolute;left: 240px;top: 0;z-index: 93;
background: rgba(255,255,255,0.5);border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;
}
.needle{
width: 360px;height: 360px;border-radius: 100%;overflow: hidden;position: absolute;
top: 70px;left: 70px;z-index: 12;
}
js code
let chnNumChar = ["零","一","二","三","四","五","六","七","八","九"];
let chnUnitSection = ["","万","亿","万亿","亿亿"];
let chnUnitChar = ["","十","百","千"];
function SectionToChinese(section){
let strIns = '', chnStr = '';
let unitPos = 0;
let zero = true;
while(section > 0){
let v = section % 10;
if(v === 0){
if(!zero){
zero = true;
chnStr = chnNumChar[v] + chnStr;
}
}else{
zero = false;
strIns = chnNumChar[v];
strIns += chnUnitChar[unitPos];
chnStr = strIns + chnStr;
}
unitPos++;
section = Math.floor(section / 10);
}
return chnStr;
}
function NumberToChinese(num){
let unitPos = 0;
let strIns = '', chnStr = '';
let needZero = false;
if(num === 0){
return chnNumChar[0];
}
while(num > 0){
let section = num % 10000;
if(needZero){
chnStr = chnNumChar[0] + chnStr;
}
strIns = SectionToChinese(section);
strIns += (section !== 0) ? chnUnitSection[unitPos] : chnUnitSection[0];
chnStr = strIns + chnStr;
needZero = (section < 1000) && (section > 0);
num = Math.floor(num / 10000);
unitPos++;
}
return chnStr;
}