Question

我想知道是否可以使用“新”CSS3（及其动画）一个接一个地显示元素（可能使用CSS3动画或混合使用：nth-child和counter？）？我想做一些倒计时，每次在另一个元素后几秒钟后显示？使用JavaScript不会有问题（而且我知道该怎么做）但CSS3是否可能（可能有一些-webkit-animation-*属性？）？

HTML就是这样（但也可以改变它）：

<div id="count-it">
    <p>10</p>
    <p>9</p>
</div>

Answer 1

嘿，玩了一下webkit动画属性，这里有一些小东西，我发现你可能觉得有用，或者至少应该给你一个或两个想法（注意：定位不是很精确）：

HTML

  <div class="wrapper"><span>5<br />4<br />3<br />2<br />1</span></div>

CSS

  @-webkit-keyframes clock {
       0% {  top: 0; }
       20% {  top: -60; }
       40% {  top: -110;}
       60% { top: -170; }
       80% {  top: -230; }
       100% { top: -290;}
  }

  .wrapper span:hover {
      -webkit-animation-name: clock;
      -webkit-animation-duration: 5s;
      -webkit-transform-origin:50% 50%;
      -webkit-animation-iteration-count: 1;
      -webkit-animation-timing-function: ease;
  }
  .wrapper {
      display:block;
      overflow: hidden;
      background-color: #fff;
      height: 50px;
      width: 25px;
      border: 1px solid #000;
      position: relative;

  }

  .wrapper span {
      font-size: 45px;
      position: absolute;
      top: 0;
  }

CSS（3）：如何在彼此之后显示元素

1 个答案: