CSS3时钟是一种非常炫酷的效果,如果你也想尝试一下,那么就跟着下面的步骤来画一个吧!
.clock{ width: 200px; height: 200px; border-radius: 50%; background-color: #eee; position: relative; border: 2px solid #333; } .hour-hand{ width: 4px; height: 60px; background-color: #333; position: absolute; left: 48%; bottom: 50%; transform-origin: bottom; transform: rotate(90deg); transition: all 0.5s ease-in-out; } .minute-hand{ width: 2px; height: 90px; background-color: #333; position: absolute; left: 49%; bottom: 50%; transform-origin: bottom; transform: rotate(90deg); transition: all 0.5s ease-in-out; } .second-hand{ width: 1px; height: 110px; background-color: #dd4b39; position: absolute; left: 49.5%; bottom: 50%; transform-origin: bottom; transform: rotate(90deg); transition: all 0.5s ease-in-out; } .dot{ width: 10px; height: 10px; border-radius: 50%; position: absolute; background-color: #333; top: 50%; left: 50%; margin-left: -5px; margin-top: -5px; } .dot:after{ content: ""; width: 8px; height: 8px; border-radius: 50%; position: absolute; background-color: #eee; top: 50%; left: 50%; margin-left: -4px; margin-top: -4px; } @media screen and (max-width: 480px) { .clock{ width: 150px; height: 150px; } .hour-hand{ height: 40px; } .minute-hand{ height: 70px; } .second-hand{ height: 90px; } }
我们先建立一个 .clock 的 div 容器,它的 border-radius 设置成 50%,这样就能画出一个圆形表盘,并且设置好背景、边框颜色。
接下来我们需要分别画三根针:小时针、分钟针和秒针。这里我们通过设置 div 的 width、height、background-color 和 position 来实现针的效果,并通过 transform 属性和 transform-origin 属性来设置针的朝向,以及设置针的起始位置。需要注意的是,我们必须把时针的 transform 属性的值设置成 rotate(90deg),这样才能把时针“横着放”,否则的话就会“头朝下”,效果会很奇怪。
最后,我们还需要在表盘的中心画一个圆形,作为指针的交点。同样地,我们通过两层嵌套的 div 元素、一些 css 属性和伪元素来实现效果。样式设置完成后,就可以在我们的网页中看到炫酷的时钟了!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。