2

我正在尝试制作我在网站上看到的效果。你可以看看这个网站： http ://www.ultranoir.com/fr/#!/blog/accueil/

或者你可以看到这个截图：

截图翻译效果

如果你在一个 div 上，你会看到一种 3D 效果。首先，我不知道如何称呼这种效果。这是一种翻译。

也许有更好的名字？

我想做这样的事情。

我分析了源代码，发现该网站正在使用背景图片：

http://www.ultranoir.com/cdn/gene/image/common/blog/grid_item_m.gif

你可以看到图片：

在此处输入图像描述

所以，这就是我所做的，但它并不完美。你可以看到这个小提琴。随意编辑小提琴。

你能帮助做得更好吗？

我想我不需要使用背景图片，它可以只用 css http://jsfiddle.net/Vinyl/BrzuV/

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.transit.min.js"></script>
<script>
$(document).ready(function() {
var $bt_bienvenue = $("#bt_bienvenue");
var $bt_bienvenue2 = $("#bt_bienvenue2");

$bt_bienvenue.hover(
         function () {
           $bt_bienvenue.transition({ x: '-10px', y: '-10px' });
           $bt_bienvenue2.fadeIn(1000);
         }, 
         function () {
           $bt_bienvenue.transition({ x: '0px', y: '0px' });
           $bt_bienvenue2.fadeOut(100);
         }
     );
});
</script>
<style>
#test {
    width:500px;
    height:150px;
    background-color:#000;
}

#container {
    padding:30px;
    font-family:Helvetica, Arial, sans-serif;
    color:#FFFFFF;
}

#bt_bienvenue {
    background-color:#e5322c;
    width:95px;
    height:190px;
    z-index:3;
    position:absolute;
    cursor:pointer;
    /*display:none;*/
}

#bt_bienvenue2 { 
    background:url(img/site/bgd-bienvenue.gif) 0 0 no-repeat;
    /*float:left;*/
    width:105px;
    height:200px;
    position:relative;
    top:-10px;
    left:-10px;
    z-index:2;
    display:none;
}
</style>
</head>

<body>
<!--<div id="test"></div>-->
<div id="container">
    <div id="bt_bienvenue">Menu</div>
    <div id="bt_bienvenue2"></div>
</div>
</body>
</html>
4

1 回答 1

4

你可以这样做：

JS： 

$(document).ready(function() {
var $bt_bienvenue = $("#bt_bienvenue");
var $bt_container = $("#container");

$bt_bienvenue.hover(
         function () {
           $bt_container.transition({ x: '-5px', y: '-5px', width: '105px', height: '205px' },200);

         }, 
         function () {
             $bt_container.transition({ x: '0px', y: '0px', width: '100px', height: '200px' },200);

         }
     );
});

您添加overflow:hidden;到您的容器中，它的宽度/高度与您的Menu. 过渡只会影响您的容器。您缩放它（105px*205px）并将其滑动到左上角，每个 5px。

而且，您缩放和滑动的次数越多，您必须在 box-shadow 属性中添加的步骤就越多。

小提琴：http: //jsfiddle.net/ARgxU/14/

于 2013-09-13T16:04:56.987 回答