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

ex：<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()

完成动画

悬停时淡出背景图片

2 个答案: