Question

我一直在开发一个页面，当用户将鼠标悬停在div上时，需要对背景图像产生过渡效果。到目前为止，可以使用以下代码片段实现此目的：

HTML

<section class="animate-me" data-src="/images/home/section_img.png" data-src-hover="/images/home/section_img_hover.png"></section>

CSS

.animate-me {
    background-image: url('/images/home/section_img.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 1050px;
}

我可以使用CSS实现鼠标悬停/移出效果，但是由于我的设计复杂性，我为此使用了js代码：

JS

$('.animate-me').hover(function () {
    $(this).css("background-image", 'url(' + $(this).data("src-hover") + ')');
}, function () {
   $(this).css("background-image", 'url(' + $(this).data("src") + ')');                
});

现在，我想要一些过渡效果。最好像我们通常通过许多图像库控件（但那些图像不适用于背景图像）一样使用here效果进行平铺/切片，或者如果不可能跨浏览器兼容的图像进行交叉淡化。用于图像过渡的基本淡入/淡出效果仅在Chrome / Safari中有效，而在FF / IE10 / 11或Edge中则无效。

是否有开箱即用的插件？如果没有的话，我将不胜感激。

在悬停时更改背景图像时平铺/切片过渡效果

0 个答案: