棋盘格过渡仅使用CSS3吗？

Question

是否可以仅使用CSS 3创建棋盘格过渡类型？

Answer 1

If you wanted to do it with images (can't see how this would work with anything else), you could use a number of divs in a grid, all with the same background image, but with different background position so that it just looks like a normal image. You could then have another image behind that one by absolutely positioning them both. You could then animate the opacity of each of the divs on the grid with different delays to get the checkerboard effect.

By using nth-child selectors you could change the delays for every other one, or something more complex.

You'd likely want JS to then set the background image of the divs to the image behind them, and then remove the transition and set opacity to 1. You could then change the image behind to something new to checkerboard to that one.

If you make this, please let me know – it sounds awesome!

Answer 2

I don't understand what is 'transition' in your message. But you can draw a checkerboard with only css3. Look at this : http://lea.verou.me/css3patterns/