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

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

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

效果展示

关键代码
这是在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);
    }
}

在这之中有几个需要特别注意的点：

• Z-index属性决定了一个HTML元素的层叠级别。
• ::before 和::after其实就是附着在元素前后的伪元素。
• 使用@keyframes实现动画效果。
  诸位想了解，可自行了解（主要是我讲得不好）