在悬停背景图像中淡入淡出

Question

这是我发现此效果很酷的网站： http : //joris.works/

我不确切知道他是如何实现的，当悬停项目时，与特定项目相关的背景图像会逐渐淡入，然后在悬停于另一个项目时无缝过渡到另一个背景图像。

放大也很酷，但是我想那是通过CSS关键帧完成的，对吗？

Answer 1

如果在列表元素的悬停方法中使用jQuery animate方法，则可以使用动画更改CSS属性。 参见： http : //www.w3schools.com/jquery/jquery_animate.asp和http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

例如： <div style="background-image: url('//joris.works/assets/img/whiteheat/whiteheat-menu-hover.jpg')" class="bg-image whiteheat"></div>

为此，请在鼠标悬停时添加活动类。

默认情况下，它具有以下具有属性的类

#bg-wrapper .bg-image {
    backface-visibility: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transform: scale(1, 1);
    transition: opacity 600ms ease-in 0s, transform 1400ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
    width: 100%;
    z-index: -99;
}

具有opacity:0

当添加活动类时，它变为：

#bg-wrapper .bg-image.active {
    opacity: 0.1;
    transform: scale(1.03, 1.03);
}

这就是它具有不同背景的方式。

动画是使用css3属性transform: scale()