css - 图片链接翻转效果

Question

有谁知道如何制作类似于所见的图像链接翻转效果here ？可能有这方面的教程吗？改变背景的不透明度并使眼睛出现很容易，但我不知道开发人员是如何让奶酪轮像那样滑进去的。

截图:

Answer 1

它是两件事的结合:

一个是改变悬停时楔形的位置(在 CSS 中)。我假设您知道该怎么做。

另一个(创建动画的那个)正在指定过渡时间，以便从一种状态平滑地移动到另一种状态。

参见 http://www.w3schools.com/css3/css3_transitions.asp有关转换如何工作的更多详细信息。

不幸的是，跨浏览器支持很差，每个浏览器都使用自己的前缀。您指向的网站使用:

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;`