问题
Since the development of CSS3, there are growing attempts to create browser-based effects (transitions and animations) merely based on CSS3 without using JavaScript. There are several examples of CSS3-based slideshows, but one thing is always lacking:
The common method for creating CSS3 slideshow is to induce sequencing delay for each slide. Thus, we need to know the number of slides and add a CSS rule for each corresponding element.
I am curious if there is another method to cycle a CSS3 slideshow without having the number of elements?
回答1:
Use the starts-with selector to avoid a rule for each corresponding element:
section[id^=slide]:target {
opacity: 1;
z-index: 1;
-moz-transform: translate(0, 0);
}
section[id^=slide]:target ~ section[id^=slide] {
-moz-transform: translate(110%, 0);
}
References:
- Pure CSS Slides
来源：https://stackoverflow.com/questions/16266246/css3-slideshow-without-knowing-the-number-of-slides