<!DOCTYPE?html><html?lang='zh-cn'>????<head>????????<title>css3時鐘動畫</title>????????<meta?charset="utf-8">????????<style?type="text/css">????????????*{????????????????margin:?0;????????????????padding:?0;????????????}????????????ul{????????????????list-style:?none;????????????}????????????h1{????????????????text-align:?center;????????????????color:?#333;????????????????margin-top:?40px;????????????????font-family:?'Microsoft?yahei';????????????}????????????/*表盤*/????????????.clock{????????????????position:?relative;????????????????width:?200px;????????????????height:?200px;????????????????border-radius:?100%;????????????????background-color:?#292a38;????????????????margin:?50px?auto;????????????}????????????.pointer?li.circle{????????????????position:?absolute;????????????????top:?50%;????????????????left:?50%;????????????????transform-origin:?left?center;????????????????background:?#fff;????????????????width:?10px;????????????????height:?10px;????????????????border-radius:?100%;????????????????margin-top:?-5px;????????????????margin-left:?-5px;????????????}????????????/*刻度*/????????????.line-hour?li,????????????.line-min?li{????????????????position:?absolute;????????????????left:?50%;????????????????top:?50%;????????????????transform-origin:?left?center;????????????????background-color:?#fff;????????????}????????????.line-hour?li{????????????????width:?10px;????????????????height:?2px;????????????}????????????.line-min?li{????????????????width:?5px;????????????????height:?2px;????????????}???????????/*數字*/????????????.number{????????????????position:?absolute;????????????????left:?50%;????????????????top:?50%;????????????????height:?150px;????????????????width:?150px;????????????????transform:?translate(-50%,-50%);????????????????font-family:?'Microsoft?yahei';????????????????font-size:?16px;????????????????color:?#fff;????????????}????????????.number?li{????????????????position:?absolute;????????????????transform:?translate(-50%,-50%);????????????}?????????????/*指針*/????????????.pointer?li{????????????????position:?absolute;????????????????top:??50%;????????????????left:?50%;????????????????transform-origin:?left?center;????????????????background:?#fff;????????????}????????????.pointer?li.hour{????????????????width:?45px;????????????????height:?3px;????????????????margin-top:?-1px;????????????}????????????.pointer?li.min{????????????????width:?60px;????????????????height:?2px;????????????????margin-top:?-1px;????????????}????????????.pointer?li.sec{????????????????width:?80px;????????????????height:?1px;????????????????margin-top:?-1px;????????????}????????</style>????</head>????<body>??????????<h1>CSS?時鐘效果分布實現</h1>????????<div?class="clock">????????????<ul?class="line-min"></ul>????????????<ul?class="line-hour"></ul>????????????<ol?class="number"></ol>????????????<ul?class="pointer">????????????????<li?class="hour"></li>????????????????<li?class="min"></li>????????????????<li?class="sec"></li>????????????????<li?class="circle"></li>????????????</ul>????????</div>????????<script?src="jquery.min.js"></script>????????<script?type="text/javascript">????????????$(function(){????????????????function?init(){????????????????????drawLines($('.line-min'),60,85);????????????????????drawLines($('.line-hour'),12,80);????????????????????drawNumbers($('.number'));????????????????????move();????????????????}????????????????init();????????????????/*????????????????*繪制鐘表刻度線????????????????*@param?wrap?刻度線的父容器????????????????*@param?total?制度線的總個數????????????????*@param?translateX??制度線在X軸方向的偏移量????????????????*/????????????????function?drawLines(wrap,total,translateX){????????????????????var?gap=360/total;????????????????????var?strHtml='';????????????????????for(var?i=0;i<total;i++){????????????????????????strHtml+='<li?style="transform:rotate('+(i*gap)+'deg)?translate('+translateX+'px,-50%)"></li>';????????????????????}????????????????????wrap.html(strHtml);????????????????}???????????????/*????????????????*繪制時鐘數字????????????????*@param?wrap數字的父容器????????????????*/????????????????function?drawNumbers(wrap){????????????????????var?radius=wrap.width()/2;????????????????????var?strHtml='';????????????????????for(var?i=1;i<=12;i++){????????????????????????myAngle=(i-3)/6*Math.PI;????????????????????????var?myX=radius+radius*Math.cos(myAngle),//X=r+rcos(@)????????????????????????????myY=radius+radius*Math.sin(myAngle);//Y=r+rsin(@)????????????????????????strHtml+='<li?style="left:'+myX+'px;top:'+myY+'px">'+i+'</li>';????????????????????}????????????????????wrap.html(strHtml);????????????????}????????????????/*鐘表走動、轉動秒針、分針、時針*/????????????????function?move(){????????????????????var?domHour=$('.hour'),????????????????????????domMin=$('.min'),????????????????????????domSec=$('.sec');????????????????????setInterval(function(){????????????????????????var?now=new?Date(),????????????????????????????hour=now.getHours(),????????????????????????????min=now.getMinutes(),????????????????????????????sec=now.getSeconds();????????????????????????var?secAngle=sec*6-90,????????????????????????????minAngle=min*6+sec*0.1-90,????????????????????????????hourAngle=hour*30+min*0.5-90;????????????????????????domSec.css('transform','rotate('+secAngle+'deg)');????????????????????????domMin.css('transform','rotate('+minAngle+'deg)');????????????????????????domHour.css('transform','rotate('+hourAngle+'deg)');????????????????????????document.title=hour+':'+min+':'+sec;????????????????????},1000);????????????????}????????????});????????</script>????</body></html>
2023-03-14
li有個marker的偽元素，加上如下樣式去除即可。
.number li::marker{
content: "";
}