仿Apple Watch时钟

最新推荐文章于 2022-08-24 09:19:59 发布

「已注销」

最新推荐文章于 2022-08-24 09:19:59 发布

阅读量342

点赞数

本文链接：https://blog.csdn.net/m0_48000173/article/details/106255727

版权

这篇博客展示了如何设计并实现一个模仿Apple Watch的时钟界面。文章包含详细的代码实现，通过这段代码，读者可以了解到图形界面设计和时间显示的技术细节。

摘要由CSDN通过智能技术生成

效果图：

代码：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>时钟</title>
<style type="text/css">
 body{
    background:#000}.clock{
    position:absolute;opacity:1}.fill .clock{
    left:50%;top:50%}.centre{
    position:absolute;top:50%;left:50%;width:0;height:0}.expand{
    position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.anchor{
    position:absolute;top:0;left:0;width:0;height:0}.element{
    position:absolute;top:0;left:0}.round{
    border-radius:296px}.circle-1{
    background:#fff;width:12px;height:12px}.circle-2{
    background:#fa9f22;width:8px;height:8px}.circle-3{
    background:#000;width:4px;height:4px}.second{
    transform:rotate(180deg)}.minute{
    transform:rotate(54deg)}.second-hand{
    width:2px;height:164px;background:#fa9f22;transform:translate(-50%,-100%) translateY(24px)}.hour{
    transform:rotate(304.5deg)}.thin-hand{
    width:4px;height:50px;background:#fff;transform:translate(-50%,-100%)}.fat-hand{
    width:10px;height:57px;border-radius:10px;background:#fff;transform:translate(-50%,-100%) translateY(-18px)}.minute-hand{
    height:112px}.hour-text{
    position:absolute;font:40px Hei,Helvetica,Arial,sans-serif;color:#fff;transform:translate(-50%,-50%)}.hour-10{
    padding-left:.4ex}.hour-11{
    padding-left:.25ex}.minute-text{
    position:absolute;font:12px Avenir Next,Helvetica,Arial,sans-serif;color:#fff;transform:translate(-50%,-50%)}.minute-line{
    background:#fff;width:1px;height:9px;transform:translate(-50%,-100%) translateY(-131px);opacity:1}


</style>
<script> 
 function stop(){
     
  return false; 
 } 
 document.oncontextmenu=stop; 
</script>
</head>
<body>
<div class="fill">
<div class="reference"></div>
<div class="clock" id="utility-clock" style="transform: scale(1.939);">
<div class="centre">
<div class="dynamic">
<div class="anchor" style="transform: rotate(6deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(12deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(18deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(24deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: -116.9px; left: 67.5px;">05</div>
<div class="anchor" style="transform: rotate(36deg);">
<div class="element minute-line"></div>
</div> 
<div class="anchor" style="transform: rotate(42deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate