买不起时钟的我，为自己写个翻页时钟

方开心

于 2021-06-05 17:56:16 发布

阅读量838

点赞数 1

分类专栏：翻页时钟前端设计文章标签： javascript css3 html jquery

本文链接：https://blog.csdn.net/qq_50610138/article/details/117598047

版权

为了节省成本，博主决定自己动手写一个翻页时钟。本文记录了这一过程，包括效果展示、关键的CSS翻页效果实现，以及利用JavaScript进行时间绑定。文章提到CSS中的z-index、伪元素和@keyframes动画，以及JavaScript中使用jQuery进行时间更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

买不起时钟的我，为自己写个翻页时钟

为了提高自己的时间观念，我决定为自己配一个时钟，迷上了翻页时钟，但是发现翻页时钟软件都是付费的，再就是达不到自己的要求，于是决定为自己写个。看似简单，实则非易。为自己的学习记录一下。

效果展示

在这里插入图片描述
关键代码
这是在css中定义实现翻页时钟的翻页效果。

@keyframes show{
   
    0%{
   
        z-index: 2; 
    }
    10%{
   
        z-index: 4;
    }
    100%{
   
        z-index: 4;
    }
}

/* 卡片翻转效果 */
.flip li.active .down{
   
    z-index: 2;
    transform: rotateX(90deg);
    animation: turn .5s .5s linear both;
}
@keyframes turn {
   
    0%{
   
        transform: rotateX(90deg);
    }
    100%{
   
        transform: rotateX(0deg);
    }
}
.flip li.before{
   
    z-index: 3;

}
.flip li.before .up{
   
    z-index: 2;
    animation: turn2 .5s linear both;

}
@keyframes turn2{
   
    0%{
   
        transform: rotateX(0deg);
    }
    100%{
   
        transform: rotateX(-90deg);
    }
}