Question

我看到了this article关于如何创建CSS倒计时器的问题。这对我来说似乎很有趣，所以我试着按照说明进行操作。这就是我想出来的。它看起来不正确，不幸的是现场演示链接被破坏了。我做错了什么？

.tens li:nth-of-type(1) {
  animation: digitcount 10s ease-in-out 0s 1;
}

.tens li:nth-of-type(2) {
  animation: tencount 60s ease-in-out 1s 1;
}

.tens li:nth-of-type(3) {
  animation: tencount 60s ease-in-out 11s 1;
}

.tens li:nth-of-type(4) {
  animation: tencount 60s ease-in-out 11s 1;
}

.tens li:nth-of-type(5) {
  animation: tencount 60s ease-in-out 11s 1;
}

.tens li:nth-of-type(6) {
  animation: tencount 60s ease-in-out 11s 1;
}

@keyframes tencount {
  0% {
    opacity: 1
  }
  16.6% {
    opacity: 1
  }
  16.7% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

.digits li:nth-of-type(1) {
  animation: digitcount 10s ease-in-out 0s 6;
}

.digits li:nth-of-type(2) {
  animation: digitcount 10s ease-in-out 1s 6;
}

.digits li:nth-of-type(3) {
  animation: digitcount 10s ease-in-out 0s 6;
}

.digits li:nth-of-type(4) {
  animation: digitcount 10s ease-in-out 1s 6;
}

.digits li:nth-of-type(5) {
  animation: digitcount 10s ease-in-out 0s 6;
}

.digits li:nth-of-type(6) {
  animation: digitcount 10s ease-in-out 1s 6;
}

.digits li:nth-of-type(7) {
  animation: digitcount 10s ease-in-out 0s 6;
}

.digits li:nth-of-type(8) {
  animation: digitcount 10s ease-in-out 1s 6;
}

.digits li:nth-of-type(9) {
  animation: digitcount 10s ease-in-out 0s 6;
}

.digits li:nth-of-type(10) {
  animation: digitcount 10s ease-in-out 1s 6;
}

@keyframes digitcount {
  0% {
    opacity: 1
  }
  9.9% {
    opacity: 1
  }
  10% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

.done li {
  animation: zero 1s ease-in-out 60s infinite;
}

@keyframes zero {
  0% {
    opacity: 1
  }
  90% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

<div class="clock">
  <ol class="tens">
    <li>6</li>
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
  </ol>
  <ol class="digits">
    <li>0</li>
    <li>9</li>
    <li>8</li>
    <li>7</li>
    <li>6</li>
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
  </ol>
  <ol class="done">
    <li>0</li>
  </ol>
</div>

Answer 1

.clock {
  
}
.clock:before {
  content: attr(data-counter);
  animation: countdown 10s steps(1, start) forwards;
}

@keyframes countdown {
  1% {
    content: '10';
  }
  10% {
    content: '9';
  }
  20% {
    content: '8';
  }
  30% {
    content: '7';
  }
  40% {
    content: '6';
  }
  50% {
    content: '5';
  }
  60% {
    content: '4';
  }
  70% {
    content: '3';
  }
  80% {
    content: '2';
  }
  90% {
    content: '1';
  }
  100% {
    content: 'BINGO!';
  }
}

<span class="clock" data-counter="10"></span>

Answer 2

如果您使用的是Firefox或Chrome，则可以使用此代码（这些是支持在CSS动画中更改content的唯一浏览器）

.tens, .digits, .colon, .minute-tens, .minute-digits {
  display: inline-block;
}
.minute-tens:before {
  content: '0';
}
.digits:before {
  content: '0';
}
.tens:before {
  content: '0';
}
.minute-digits:before {
  content: '0';
}

.digits:before {
  animation: digitcount 10s ease 0s 6;
}
.tens:before {
  animation: tencount1 10s ease 0s, tencount2 10s ease 10s, tencount3 10s ease 20s, tencount4 10s ease 30s, tencount5 10s ease 40s, tencount6 10s ease 50s;
}
.minute-digits:before {
  animation: minute-digitcount1 60s ease 0s;
}
@keyframes digitcount {
  10% { content: '9'; }
  20% { content: '8'; }
  30% { content: '7'; }
  40% { content: '6'; }
  50% { content: '5'; }
  60% { content: '4'; }
  70% { content: '3'; }
  80% { content: '2'; }
  90% { content: '1'; }
  100% { content: '0'; }
}
@-webkit-keyframes digitcount {
  10% { content: '9'; }
  20% { content: '8'; }
  30% { content: '7'; }
  40% { content: '6'; }
  50% { content: '5'; }
  60% { content: '4'; }
  70% { content: '3'; }
  80% { content: '2'; }
  90% { content: '1'; }
  100% { content: '0'; }
}
@keyframes tencount1 { 0%, 10% { content: '0'; } 10%, 100% { content: '5'; } }
@keyframes tencount2 { 0%, 10% { content: '5'; } 10%, 100% { content: '4'; } }
@keyframes tencount3 { 0%, 10% { content: '4'; } 10%, 100% { content: '3'; } }
@keyframes tencount4 { 0%, 10% { content: '3'; } 10%, 100% { content: '2'; } }
@keyframes tencount5 { 0%, 10% { content: '2'; } 10%, 100% { content: '1'; } }
@keyframes tencount6 { 0%, 10% { content: '1'; } 10%, 100% { content: '0'; } }

@-webkit-keyframes tencount1 { 0%, 10% { content: '0'; } 10%, 100% { content: '5'; } }
@-webkit-keyframes tencount2 { 0%, 10% { content: '5'; } 10%, 100% { content: '4'; } }
@-webkit-keyframes tencount3 { 0%, 10% { content: '4'; } 10%, 100% { content: '3'; } }
@-webkit-keyframes tencount4 { 0%, 10% { content: '3'; } 10%, 100% { content: '2'; } }
@-webkit-keyframes tencount5 { 0%, 10% { content: '2'; } 10%, 100% { content: '1'; } }
@-webkit-keyframes tencount6 { 0%, 10% { content: '1'; } 10%, 100% { content: '0'; } }

@keyframes minute-digitcount1 { 0%, 1.7% { content: '1'; } 1.7%, 100% { content: '0'; } }
@-webkit-keyframes minute-digitcount1 { 0%, 1.7% { content: '1'; } 1.7%, 100% { content: '0'; } }

<div class="clock">
  <div class="minute-tens"></div>
  <div class="minute-digits"></div>
  <div class="colon"> : </div>
  <div class="tens"></div>
  <div class="digits"></div>
</div>

否则，以下是一些可在任何浏览器中使用的代码。

ol.tens, .digits, .first {
  list-style-type: none;
  margin:0;
  padding:3px;
  position: relative;
  display: inline-block;
}
ol.first {
  margin-right: 12px;
}
.tens li, .digits li, .first li {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
}
.first li:nth-of-type(2) {
  animation: minutecount 60s ease-in-out 0s 1;
}

.tens li:nth-of-type(1) {
  animation: tenscount 60s ease-in-out 51s 1;
}
.tens li:nth-of-type(2) {
  animation: tenscount 60s ease-in-out 41s 1;
}
.tens li:nth-of-type(3) {
  animation: tenscount 60s ease-in-out 31s 1;
}
.tens li:nth-of-type(4) {
  animation: tenscount 60s ease-in-out 21s 1;
}
.tens li:nth-of-type(5) {
  animation: tenscount 60s ease-in-out 11s 1;
}
.tens li:nth-of-type(6) {
  animation: tenscount 60s ease-in-out 1s 1;
}
.tens li:nth-of-type(7) {
  animation: tenscount 60s ease-in-out 0s 1;
}


.digits li:nth-of-type(1) {
  animation: digitcount 10s ease-in-out 10s 6;
}

.digits li:nth-of-type(2) {
  animation: digitcount 10s ease-in-out 9s 6;
}

.digits li:nth-of-type(3) {
  animation: digitcount 10s ease-in-out 8s 6;
}

.digits li:nth-of-type(4) {
  animation: digitcount 10s ease-in-out 7s 6;
}

.digits li:nth-of-type(5) {
  animation: digitcount 10s ease-in-out 6s 6;
}

.digits li:nth-of-type(6) {
  animation: digitcount 10s ease-in-out 5s 6;
}

.digits li:nth-of-type(7) {
  animation: digitcount 10s ease-in-out 4s 6;
}

.digits li:nth-of-type(8) {
  animation: digitcount 10s ease-in-out 3s 6;
}

.digits li:nth-of-type(9) {
  animation: digitcount 10s ease-in-out 2s 6;
}

.digits li:nth-of-type(10) {
  animation: digitcount 10s ease-in-out 0.7s 6;
}

@keyframes digitcount {
  0% {
    opacity: 1
  }
  9.9% {
    opacity: 1
  }
  10% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@keyframes tenscount {
  0% {
    opacity: 1
  }
  0.9% {
    opacity: 1
  }
  2% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}
@keyframes minutecount {
  0% { opacity: 1; }
  2.8% { opacity: 1; }
  2.9% { opacity: 0; }
  100% { opacity: 0; }
}

<div class="clock">
  <ol class="first">
    <li>00:</li>
    <li>01:</li>
  </ol>
  <ol class="tens">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>0</li>
 </ol>
 <ol class="digits">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
 </ol>
</div>

Answer 3

你只需要做一些数学运算就可以了。

<div class="clock">
  <ol class="tens">
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
    <li>0</li>
 </ol>
 <ol class="digits">
    <li>9</li>
    <li>8</li>
    <li>7</li>
    <li>6</li>
    <li>5</li>
    <li>4</li>
    <li>3</li>
    <li>2</li>
    <li>1</li>
    <li>0</li>
 </ol>
</div>
<style>
ol.tens, .digits{
  list-style-type: none;
  padding: 10px;
  margin:0;
  position: relative;
}
.tens li, .digits li{
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
}

.tens li:nth-of-type(1) {
  animation: tenscount 60s ease-in-out 60s 1;
}
.tens li:nth-of-type(2) {
  animation: tenscount 60s ease-in-out 50s 1;
}
.tens li:nth-of-type(3) {
  animation: tenscount 60s ease-in-out 40s 1;
}

.tens li:nth-of-type(4) {
  animation: tenscount 60s ease-in-out 30s 1;
}

.tens li:nth-of-type(5) {
  animation: tenscount 60s ease-in-out 20s 1;
}

.tens li:nth-of-type(6) {
  animation: tenscount 60s ease-in-out 10s 1;
}


.digits li:nth-of-type(1) {
  animation: digitcount 10s ease-in-out 10s 6;
}

.digits li:nth-of-type(2) {
  animation: digitcount 10s ease-in-out 9s 6;
}

.digits li:nth-of-type(3) {
  animation: digitcount 10s ease-in-out 8s 6;
}

.digits li:nth-of-type(4) {
  animation: digitcount 10s ease-in-out 7s 6;
}

.digits li:nth-of-type(5) {
  animation: digitcount 10s ease-in-out 6s 6;
}

.digits li:nth-of-type(6) {
  animation: digitcount 10s ease-in-out 5s 6;
}

.digits li:nth-of-type(7) {
  animation: digitcount 10s ease-in-out 4s 6;
}

.digits li:nth-of-type(8) {
  animation: digitcount 10s ease-in-out 3s 6;
}

.digits li:nth-of-type(9) {
  animation: digitcount 10s ease-in-out 2s 6;
}

.digits li:nth-of-type(10) {
  animation: digitcount 10s ease-in-out 1s 6;
}

@keyframes digitcount {
  0% {
    opacity: 1
  }
  9.9% {
    opacity: 1
  }
  10% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@keyframes tenscount {
  0% {
    opacity: 1
  }
  0.9% {
    opacity: 1
  }
  2% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

</style>

如何使用CSS创建倒计时时钟

3 个答案: