CSS 3D 盒子悬停效果 - 对 Angular 线

Question

目标:

我正在为 friend 的网站创建一个具有 3D 悬停效果的图形菜单。有一系列的矩形。当一个悬停在上面时，它会向上和向左移动，留下一个更暗的自身版本，看起来它正在向外滑动。 (截图中的红圈只是为了显示问题区域。)

---

我得到了什么:

我正在使用带有 <li><a><span> 的无序列表结构体。我目前让它在悬停时正确移动，留下阴影。

代码:

(下面的 JSFiddle)

HTML:

<section>
    <li class="tall" id="logos"><a class="dark" href=""><span>Logos</span></a></li>
    <li class="wide" id="illustrations"><a class="dark" href=""><span>Illustrations</span></a></li>
    <li class="wide" id="drawings"><a href=""><span>Drawings</span></a></li>
    <li class="small" id="web"><a href=""><span>Web</span></a></li>
    <li class="small narrow"  id="print"><a href=""><span>Print</span></a></li>
    <li class="small" id="other"><a class="dark" href=""><span>Other</span></a></li>
</section>

CSS:

section { //Wrap
    height:200px;
    width:600px;
}
li {
    list-style:none;
    display:block;
    float:left;
    height:47%;
    margin-bottom:2%;
}

a {
    outline:0;
    height:100%;
    width:100%;
    display:block;
    color:black;
    text-decoration:none;
    position:relative;
    top:0;
    left:0;
    box-shadow:0px 0px 0px 0px rgb(0,0,0);
    transition: all 100ms ease-in;
    background-color:inherit;
}
a:hover, a:focus {
    top:-4px;
    left:-4px;
    box-shadow:4px 4px 0px 0px rgba(0,0,0,0.2);
}
span {
    display:block;
    position:absolute;
    top:50%;
    margin-top:-15px;
    width:100%;
    text-align:center;
    font-family:Calibri;
    font-size:22px;
    font-weight:100;
}
//Sizes
.tall {
    height:100%;
    width:32%;
}
.wide {
    width:32%;
    margin-left:2%;
}
.small {
    margin-left:2%;
    width:21%;
}
.small.narrow {
    width:20%;
}
.dark {
    color:white;
}
//Colors
#logos {
    background-color:rgb(242,25,44); 
}
#illustrations {
    background-color:rgb(41,90,95);
}
#drawings {
    background-color:rgb(139,181,143);
}
#web {
    background-color:rgb(187,222,189);
}
#print {
    background-color:rgb(239,243,210);
}
#other {
    background-color:rgb(242,25,44);
}

截图:

fiddle :

http://jsfiddle.net/LhkEp/9/

---

我需要什么:

我需要弄清楚如何让 Angular 看起来对 Angular 线。如果您注意到两张图片之间的区别，我当前的版本没有将它们连接起来。这可能吗？感谢您的帮助!

---

编辑:

我有 2 种不同的方法来创建带颜色的三 Angular 形片，但都需要进行一些调整才能获得我想要的效果。我不确定最终哪个会更简单，并且在动画时看起来更好。我将花一些时间和他们一起玩，并报告我最终使用的是什么。感谢所有回答的人。 (如果您的想法与所提议的不同，请随时添加其他答案。)

编辑 2:

使用 web-tiki 的方法，我在这里完全可以使用它:http://jsfiddle.net/LhkEp/23/我认为这是最好的方法，因为没有故障，即使放慢动画速度，一切看起来都很完美。此外，通过更改为对所有选择使用环绕，如果您只是将鼠标悬停在阴影上，则不会来回移动。

Answer 1

您可以使用边框在右上角和左下角制作三 Angular 形(这里有一篇文章详细解释了该技术:How does this CSS triangle shape work?)，并在悬停时为它们的位置设置动画以创建突出效果。

在下面的演示中，我用红色三 Angular 形制作了效果，因此您可以看到鼠标悬停时的移动方式。然后您可以根据需要调整它并更改边框颜色以匹配每个菜单项的阴影:

DEMO

这是我添加的 CSS:

a:before, a:after{
    content:'';
    position:absolute;
    transition: right 100ms ease-in, bottom 100ms ease-in;
}
a:after{
    top:0; right:0;
    border-bottom:2px solid red;
    border-left:2px solid red;
    border-right:2px solid transparent;
    border-top:2px solid transparent;
}
a:hover:after{
    right:-3px;
}
a:before{
    bottom:0; left:0;
    border-top:2px solid red;
    border-right:2px solid red;
    border-left:2px solid transparent;
    border-bottom:2px solid transparent;
}
a:hover:before{
    bottom:-4px;
}