仅使用CSS3进行棋盘转换?

时间:2011-05-09 18:56:18

标签: animation css3 transition

是否可以使用CSS 3创建一个棋盘类型的过渡?

2 个答案:

答案 0 :(得分:0)

如果你想用图像做(不能看到它如何与其他任何东西一起工作),你可以在网格中使用多个div,所有div都具有相同的背景图像,但具有不同的背景位置,以便它看起来像一个普通的图像。然后你可以通过绝对定位它们来在那个背后有另一个图像。然后,您可以使用不同的延迟为网格上的每个div的不透明度设置动画,以获得棋盘效果。

通过使用nth-child选择器,您可以更改每个其他选择器的延迟,或更复杂的事情。

你可能希望JS然后将div的背景图像设置为它们后面的图像,然后删除过渡并将不透明度设置为1.然后可以将后面的图像更改为棋盘格的新图像

如果你这样做,请告诉我 - 听起来很棒!

答案 1 :(得分:0)

我不明白你邮件中的'过渡'是什么。但你可以画一个只有css3的棋盘格。看看这个:http://lea.verou.me/css3patterns/