放大 Flipclock.js

Question

我有一个使用 flipclock.js 的网站。我在让它变大时遇到了一些麻烦，所以它在页面上占用了更多 space。

有谁知道如何放大或放大它？

Answer 1

添加这个 sass 就完成了....

.countdown.flip-clock-wrapper 
  transform: scale(1.5)

Answer 2

时钟根据字体大小进行调整。如果您在评论 (https://codepen.io/sarus/pen/xjKEZq?editors=0100) 中提供的代码笔中更改字体大小，则整个时钟会缩放 up/down。您还可以单独调整边框半径、间隙和点大小。

基本上，前 4 个 SASS 变量旨在更改：

// 
// ------------------------- FlipClock
// 
$clock-flip-font-size: 200px
$clock-flip-border-radius: 8px
$clock-digit-gap: 40px
$clock-dot-size: 20px

放大 Flipclock.js

Scale Up Flipclock.js

css

flipclock