css - 图片链接翻转效果

Question

有人知道如何制作类似于这里看到的图像链接翻转效果吗？可能有这个教程吗？改变背景的不透明度并让眼睛看起来很容易，但我不知道开发人员是如何让奶酪轮像那样滑入的。

截图：

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;`