开发者

Checkerboard transition with CSS3 Only?

开发者 https://www.devze.com 2023-03-04 05:50 出处:网络
Is it possible 开发者_Python百科to create a checkerboard type of transition with CSS 3 Only?If you wanted to do it with images (can\'t see how this would work with anything else), you could use a numb

Is it possible 开发者_Python百科to create a checkerboard type of transition with CSS 3 Only?


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!


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/

0

精彩评论

暂无评论...
验证码 换一张
取 消