这篇文章展示了如何使用CSS3和HTML创建一个3D立体时钟，通过CSS动画和定位技巧实现小时、分钟和秒针的动态效果。作者详细介绍了scale、hand和transform-origin等关键属性的运用。
}p{color:#854d27;
}code{color:#f4c950;
}.clock{--clock-width:50vmin;width:var(--clock-width);height:var(--clock-width);position:relative;overflow:hidden;border:6px solid #f4c950;border-radius:50%;
}.clock:after{content:‘‘;position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%, -50%);width:6px;height:6px;background:#d0b8ac;border-radius:50%;
}.scaleContainer{--scale-width:2px;margin:0;padding:0;width:var(--scale-width);height:calc(var(--clock-width) / 2 + 4px);position:absolute;bottom:calc(var(--clock-width) / 2);left:calc((var(--clock-width) - var(--scale-width)) / 2);
/*background: #f4c950;*/transform-origin:center bottom;
}.scaleContainer:nth-of-type(5n + 5){--scale-width:5px;width:var(--scale-width);left:calc((var(--clock-width) - var(--scale-width)) / 2);
}.scale{height:calc(var(--clock-width) / 22);background:#f4c950;
}.scaleContainer:nth-of-type(5n + 5) .scale{height:calc(var(--clock-width) / 16);
}.hand{--hand-width:4px;--hand-length:calc(var(--clock-width) / 2 - 6px);width:var(--hand-width);height:var(--hand-length);background:#d0b8ac;position:absolute;bottom:calc(var(--clock-width) / 2);left:calc((var(--clock-width) - var(--hand-width)) / 2);transform-origin:center bottom;z-index:20;
}.hour-hand{height:15vmin;
}.minute-hand{--hand-height:20vmin;height:var(--hand-height);
}.second-hand{--hand-width:2px;width:var(--hand-width);left:calc((var(--clock-width) - var(--hand-width)) / 2);
}
2044
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
