jquery js实现动画时钟

最新推荐文章于 2022-06-19 11:08:04 发布

灵感大王

最新推荐文章于 2022-06-19 11:08:04 发布

阅读量261

点赞数

本文链接：https://blog.csdn.net/weixin_45747732/article/details/102688738

版权

这篇博客介绍如何利用jQuery和JavaScript编写代码，实现一个动态更新的时间显示动画。通过CSS定义样式，JS处理时间的实时更新，创建出一个视觉效果吸引人的时钟。

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

在这里插入图片描述
css样式代码如下：

<style>
            body,
            html {
   
                margin: 0;
            }

            .location {
   
                position: relative;
                width: 600px;
                height: 600px;
                left: calc(50% - 300px);
            }

            .dial {
   
                width: 600px;
                height: 600px;
                margin: 0 auto;
                position: absolute;
                border-radius: 50%;
                overflow: hidden;
                background-color: rgba(153, 50, 204, 0.2);
                background-image: url(img/表盘.jpg);
                background-size: 100% 100%;
            }

            .bigdiv {
   
                width: 600px;
                height: 600px;
                margin: 0 auto;
                position: absolute;
                border-radius: 50%;
                overflow: hidden;
            }

            .bigdiv>div {
   
                position: absolute;
                left: 298px;
                border-radius: 100px;
            }

            .bigdiv1 {
   
                animation: moves 60s steps(60) infinite;
            }

            .bigdiv1 .secondHand {