这个动画是怎么做的？

Question

我喜欢 这个小动画的显示方式

在最右上角,当我们将鼠标悬停在徽标上时,Home会显示文本.

这怎么可能？我查了css但没找到.

谢谢你的帮助.

Answer 1

在网站上它是通过javascript实现的,但这不是必需的.

这是一个简单的过渡:

正常的风格是

top:0;

和悬停的风格

top:-51px;

结合

transition: all 1s/*the time*/;

和这样的图像:

+-------+
| Gidsy |
|       |
|  Home |
+-------+

注意:转换在Internet Explorer版本9及更低版本中不起作用.改进和简化的Javascript(jQuery)将是:

$(".blue-arrow a").hover(
     /* mouse-in */
     function(){
         $(".logo").stop().animate({top:-51},200);
     },
     /* mouse-out */
     function(){
         $(".logo").stop().animate({top:0},200);
     }
);

为了使两个版本都能正常工作,你需要一个包装元素,它有一半的图像高度overflow:hidden,所以它只显示一个图像.

这是一个包含JS和CSS版本的示例.