翻页时钟的实现

今天在掘金上看到一篇实现翻页时钟的文章，看完后收获很大。作者Mr_兔子先生，链接：https://juejin.cn/post/6844904003889790983。

他的思路是利用伪类元素实现，这样减少了HTML的结构

具体样式如下：

/* 最外层样式 */
.flip {
  margin: 50px auto;
  position: relative;
  width: 60px;
  height: 100px;
  line-height: 100px;
  border: solid 1px #000;
  border-radius: 10px;
  background-color: #fff;
  font-size: 66px;
  color: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, .5);
  box-sizing: border-box;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
/* 设置前后伪元素通用样式 */
.flip .digital::before,
.flip .digital::after {
  content: attr(data-number);
  position: absolute;
  left: 0;
  right: 0;
  background: #000;
  overflow: hidden;
}
/* 设置上部分位置和盒子圆角，添加中间间隔线 */
.flip .digital::before {
  top: 0;
  bottom: 50%;
  border-radius: 10px 10px 0 0;
  border-bottom: solid 1px #666;
}
/* 设置下部分位置和盒子圆角 */
.flip .digital::after {
  top: 50%;
  bottom: 0;
  border-radius: 0 0 10px 10px;
  line-height: 0;
}

实现后的效果：

原先作者是给0-9的css样式添加content，这里我在html上添加了data-number属性进行了改进，然后在css用了attr()可以引用，这样减少了代码量。关于attr的用法可以在MDN上查阅。

然后是添加动画效果。

这里我直接拿作者的图来展示层级关系。

比如是向下翻，0到1，那么0的上部分层级要高于1的下部分

不设置z-index的话值默认为auto，和父级同层，所以可以不设置也可以。

/*向下翻*/
.flip.down .front:before {
  z-index: 3;
}

.flip.down .back:after {
  z-index: 2;
  transform-origin: 50% 0%;
  transform: perspective(160px) rotateX(180deg);
}

给需要翻滚的伪元素添加层级，并且以上一张的中心为旋转点，将下部分翻转，perspective属性我暂时还没搞懂。

然后添加动画效果

.flip.down.go .front:before { transform-origin: 50% 100%; animation: frontFlipDown 0.6s ease-in-out both; }
.flip.down.go .back:after { animation: backFlipDown 0.6s ease-in-out both; }
@keyframes frontFlipDown { 0% { transform: perspective(160px) rotateX(0deg); }
100% { transform: perspective(160px) rotateX(-180deg); } }
@keyframes backFlipDown { 0% { transform: perspective(160px) rotateX(180deg); }
100% { transform: perspective(160px) rotateX(0deg); z-index: 3; } }

然后给#flip添加go的class，就可以看到向下翻页的效果。

除了修改z-index也可以使用backface-visibility: hidden;来隐藏上半部纸片。

.flip.down.go .front:before {
    transform-origin: 50% 100%;
    animation: frontFlipDown 0.6s ease-in-out both;
+  backface-visibility: hidden;
}

添加JS逻辑

基础JS

翻页时钟的实现

相关

标签