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

我想知道是否可以用“新”CSS3（及其动画）逐个显示元素（也许使用CSS3动画或混合使用： nth-child和counter？）？我想做某种倒数计时，每次其他元素在几秒钟后显示？使用JavaScript不会是一个问题（我知道该怎么做），但是CSS3有可能（有些-webkit-animation-*属性可能？）？CSS（3）：如何在彼此之后显示元素

HTML是这样的（但可能是还改变了它需要的话）：

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

来源

2011-05-02 Poru

你能用JavaScript演示吗，所以我们有一个可视化的想法你试图实现什么？ – BoltClock 2011-05-02 21:44:51

我从来没有听说过CSS中的定时器，但如果有这样的功能，也很想知道。 – robx 2011-05-03 01:08:45

嗨，看看这里的解决方案[链接]（http://www.cssplay.co.uk/menu/css3-digital-timer.html）。这是一个CSS计数器，显示您在页面上的时间。你可能会以某种方式使用这个想法。你可能只需要使用特定的迭代计数来调整它的逻辑，而不是无限的。 – 2011-05-03 08:13:14

嘿，起到了位与WebKit的动画属性，这里是一个小啄我做的，你可能会发现有用的或者它应该至少给你一个想法或两个（注：定位不是很acurate的）：

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; 
    }

来源

2011-05-03 09:18:28

不知何故，这是行不通的。你使用什么浏览器？我使用了Chrome 13. – Poru 2011-05-03 15:27:49

我使用了Chrome 12.0.742.16 dev-m。它也适用于Safari 5.0.3。这里是一个链接到我的[示例]（http://css3.meetpollux.com/test_chrome.html） – 2011-05-04 07:14:48

@Poru在我的Chrome 11中工作得很好。该跨度上有一个悬停触发器。你注意到了吗？ – 2011-05-04 08:57:43

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

回答

相关问题