Question

我有一些问题试图将文字，小时，天，月，年变成绿色，我正在使用flipclock.js，有没有人知道如何更改它，如果是这样你可以指导我在正确的方向。

Answer 1

问题已经回答了，但我认为这对其他人有用：

简单的CSS将FlipClock.js默认颜色反转为白色背景和黑色文本：

.flip-clock-wrapper ul {
        background: #fff;
    }

        .flip-clock-wrapper ul li a div.up:after {
            background-color: #fff;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .flip-clock-wrapper ul li a div div.inn {
            color: #111;
            text-shadow: 0 1px 1px #555;
            background-color: #ddd;
        }

Answer 2

如果你使用的新版本在225左右（css文件）

.flip-clock-divider .flip-clock-label {

颜色：绿色; }

Answer 3

如果您正在寻找改进其他颜色的高级解决方案，那么已经发布了here的解决方案。

这是一个改编自repo的closed issue（未解决）之一的解决方案。似乎开发人员承诺了一个新的API，但这已经超过一年了。

由于设置$clock-flip-font-size: 120px时存在一些问题，因此并不完美。此外，当分钟显示为3位数时，“分钟”文本不是centered。

以下是codepen：https://codepen.io/jimasun/pen/PzAqVw/

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

$clock-height: ($clock-flip-font-size * 1.2)
$clock-flip-width: ($clock-flip-font-size * 0.8)
$clock-flip-margin: ($clock-digit-gap / 2)
$clock-flip-section-width: (2 * ($clock-flip-width + 2 * $clock-flip-margin))

$clock-flip-bg: #607D8B
$clock-flip-shadow: 0 2px 5px rgba(0, 0, 0, 0.7)
$clock-flip-font-color: #F44336
$clock-flip-font-shadow: 0 1px 2px #000

.countdown-wrapper
  left: 50%
  position: absolute
  top: 50%
  transform: translate(-50%, -50%)

.countdown.flip-clock-wrapper ul
  height: $clock-height
  margin: 0 $clock-flip-margin
  width: $clock-flip-width
  box-shadow: $clock-flip-shadow

.countdown.flip-clock-wrapper ul li
  line-height: $clock-height

.countdown.flip-clock-wrapper ul li a div div.inn
  background-color: $clock-flip-bg
  color: $clock-flip-font-color
  font-size: $clock-flip-font-size
  text-shadow: $clock-flip-font-shadow

.countdown.flip-clock-wrapper ul,
.countdown.flip-clock-wrapper ul li a div div.inn
  border-radius: $clock-flip-border-radius

.countdown.flip-clock-wrapper ul li a div.down
  border-bottom-left-radius: $clock-flip-border-radius
  border-bottom-right-radius: $clock-flip-border-radius

.countdown.flip-clock-wrapper ul li a div.up:after
  top: (($clock-height / 2) - 1px)

.countdown .flip-clock-dot.top
  top: ($clock-height / 2 - $clock-flip-font-size * 0.2 - $clock-dot-size / 2)

.countdown .flip-clock-dot.bottom
  top: ($clock-height / 2 + $clock-flip-font-size * 0.2 - $clock-dot-size / 2)

.countdown .flip-clock-dot
  height: $clock-dot-size
  left: $clock-dot-size
  width: $clock-dot-size
  background: $clock-flip-bg

.countdown .flip-clock-divider
  height: $clock-height
  width: ($clock-dot-size * 3)
  &:first-child
    width: 0

.countdown .flip-clock-divider.seconds .flip-clock-label,
.countdown .flip-clock-divider.minutes .flip-clock-label
  right: -1 * $clock-flip-section-width

.countdown .flip-clock-divider .flip-clock-label
  color: $clock-flip-font-color
  font-size: $clock-flip-font-size / 4
  width: 2 * $clock-flip-width + 4 * $clock-flip-margin
// 
// ------------------------- FlipClock
//

如何更改文本flipclock.js上的字体颜色

3 个答案: