CSS 实现钟表(同步本地时间)
// 获取当前时间,替换成表针角度的方法的一种实现
const getAngle = () => { const date = new Date() const h = date.getHours() const m = date.getMinutes() const s = date.getSeconds() return { angleh: Math.round(((h > 12 ? h - 12 : h) / 12) * 360) + Math.round((m / 60) * 30), anglem: Math.round((m / 60) * 360), angles: Math.round((s / 60) * 360), } }
<div className="roundAnim"
style={{
'--angles': getAngle().angles + 'deg',
'--anglem': getAngle().anglem + 'deg',
'--angleh': getAngle().angleh + 'deg',
}}
>
{/* 刻度 */}
<div className="scale"></div>
<div className="s"></div>
<div className="m"></div>
<div className="h"></div>
<div className="point"></div>
</div>
// 表盘
.roundAnim { position: relative; width: 200px; height: 200px; border: 4px solid #000; border-radius: 50%; }
// 表针容器 .roundAnim .s, .roundAnim .m, .roundAnim .h, .roundAnim .point { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
// 表针动画设置 .roundAnim .s { transform: rotate(var(--angles)); animation: propertyRotateS 60s infinite steps(60); } .roundAnim .m { transform: rotate(var(--anglem)); animation: propertyRotateM 3600s infinite steps(360); } .roundAnim .h { transform: rotate(var(--angleh)); animation: propertyRotateH 86400s infinite steps(86400); }
// 表针中心点样式 .roundAnim .point::before { content: ' '; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #000; border-radius: 50%; }
// 秒针样式 .roundAnim .s::before { content: ' '; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 160px; background: linear-gradient( 180deg, #000 0%, #000 50%, transparent 50%, transparent 100% ); border-radius: 2px; }
// 分针样式 .roundAnim .m::before { content: ' '; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 120px; background: linear-gradient( 180deg, #000 0%, #000 50%, transparent 50%, transparent 100% ); border-radius: 2px; }
// 时针样式 .roundAnim .h::before { content: ' '; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); // 针的一半透明不显示 width: 5px; height: 100px; background: linear-gradient( 180deg, #000 0%, #000 50%, transparent 50%, transparent 100% ); border-radius: 2px; }
// 表盘刻度--网上找的 .scale { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: repeating-conic-gradient( from -0.5deg, #333 0 1deg, transparent 0deg 30deg ), repeating-conic-gradient(from -0.5deg, #ccc 0 1deg, transparent 0deg 6deg); border-radius: 50%; -webkit-mask: radial-gradient(transparent 88px, red 0); }
// 动画
@keyframes propertyRotateS {
0% {
tranform: rotate(var(--angles));
} 100% {
tranform: rotate(calc(360deg+var(--angles)));
}
}
@keyframes propertyRotateM {
0% {
tranform: rotate(var(--anglem));
} 100% {
tranform: rotate(calc(360deg+var(--anglem)));
}
}
@keyframes propertyRotateH {
0% {
tranform: rotate(var(--angleh));
} 100% {
tranform: rotate(calc(360deg+var(--angleh)));
}
}
效果: