翻页时钟制作（vue、taro小程序）

发表于 | 更新于

一、使用Taro开发小程序翻页时钟

  1. 点击查看详细代码 -> github

  2. 小程序DEMO
    taro翻页小程序

二、vue开发翻页时钟

  1. 详细代码移步github

  2. 演示 DEMO

安装

1
yarn add kuan-vue-flip-clock

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div class="test-clock-container">
    <flip-clock />
  </div>
</template>

<script>
  import FlipClock from 'kuan-vue-flip-clock'
  export default {
    components: {
      FlipClock
    }
  }
</script>

<style lang="scss">
  .test-clock-container {
    font: normal 12px 'Helvetica Neue', Helvetica, sans-serif;
    user-select: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    background: radial-gradient(ellipse at center, #969696 0%, #595959 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

三、参考

ademilter