在懸停背景圖像中淡入淡出

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