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）：如何在彼此之後顯示元素

回答

相關問題