logo标签列表

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

csscss-shapes
4

目标:

我正在为朋友的网站创建一个带有3D悬停效果的图形菜单。有一系列矩形。当鼠标悬停在其中一个上时，它将向上和向左移动，留下一个更暗的版本以显示它正在向外滑动。（屏幕截图中的红色圆圈只是为了显示问题区域。）

enter image description here

我的实现:

我使用一个无序列表，结构为<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/

我需要什么：

我需要找出如何让角落看起来是斜的。如果你注意到两张图片之间的区别，我的当前版本没有将它们连接起来。这可行吗？谢谢帮忙！

编辑：

我已经得到了两种不同的用颜色创建三角形的方法，但都需要一些调整才能得到我想要的效果。我不确定最终哪种方法会更简单，并且在动画时看起来更好。我将花一些时间来尝试它们，并回报我最终使用的是哪一个。感谢所有回答的人。（如果您有比已提出的更好的想法，请随意添加另一个答案。）

编辑 2:

使用web-tiki的方法，我在这里完全解决了它：http://jsfiddle.net/LhkEp/23/ 我认为这是最好的方法，因为没有故障，并且即使您减慢动画速度，一切都看起来完美。此外，通过更改使用包装的所有选择，如果您只是悬停在阴影上方，就不会来回移动。

4个回答
3
您可以使用边框来制作三角形（这里有一篇文章详细解释了该技术：CSS三角形原理是什么？），在右上角和左下角创建三角形，并在悬停时动画移动它们的位置以创建弹出效果。
在以下演示中，我使用红色三角形制作了效果，以便您可以看到它们在悬停时如何移动。然后，您可以根据需要进行调整，并更改边框颜色以匹配每个菜单项的阴影： 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;
}
@Ruddy 添加了解释 - web-tiki
我喜欢这个，只是我在让颜色匹配方面遇到了麻烦。你让它变成了纯红色。我尝试过使用inherit，但那会显示白色。 - Kelderic
@AndyM，我在边框宽度上添加了动画效果，并将其颜色设置为与阴影相同（仅适用于标志菜单项）。http://jsfiddle.net/webtiki/LhkEp/16/ - web-tiki
@AndyM 也许你可以看一下 currentColor，虽然我不确定浏览器的支持情况有多好 http://css-tricks.com/currentcolor/ - web-tiki
我已经完全按照你的方法在这里实现了它。我使用了2个伪元素来进行颜色处理，另外还有2个用于变暗，基于a和li的before和after。http://jsfiddle.net/LhkEp/19/现在我遇到的唯一问题是，如果你在变暗的部分悬停，会触发`li:hover`而不是`a:hover`，导致一个小故障。 - Kelderic
显示剩余6条评论
2
这可以通过伪元素和一些CSS边框技巧来实现...关键部分是在角落处的边框交汇处是 斜切的（mitred），这样就能产生所需的角度。

再加上一些 :hover 的过渡效果，就完成了！

演示 Fiddle

演示 Fiddle 使用你的代码（还有更复杂、更平滑的动画）

div {
    height:50px;
    width:50px;
    position:relative;
    background:pink;
    top:0;
    left:0;
    transition:all 100ms ease-in;    
}
div:hover{
    top:-4px;
    left:-4px;
}
div:hover:before, div:hover:after{
    opacity:1;
}
div:before, div:after {
    content:'';
    display:inline-block;
    position:absolute;
    opacity:0;
    transition:opacity 100ms ease-in;
}
div:after {
    height:100%;
    right:-4px;
    border-top:4px solid white;
    border-left:4px solid red;
}
div:before {
    width:100%;
    height:4px;
    top:100%;
    border-left:4px solid white;
    border-top:4px solid red;
}
我喜欢这个效果，但阴影本身在移动，因为它从下面淡入淡出，然后向上移动。这会导致一种抖动的效果。 - Kelderic
@AndyM，你能澄清一下吗？这都很容易配置。 - SW4
抱歉，是的，第二个解决了移动问题，但现在有一个白色闪光。 - Kelderic
你和web-tiki的回答都是非常不同的方法，都需要我花一些时间来实现。我的目标是只声明每种颜色一次。由于阴影的不透明度，我能够使用较暗的颜色。我不认为我可以在不声明两次颜色的情况下使这种方法起作用。然而，我还需要更多地尝试才能确定使用哪种方法，所以我暂时不会选择一个答案。非常感谢你的帮助！ - Kelderic
2

这很简单，不知道您是否知道可以应用多个阴影，所以您只需要按照以下步骤操作:

a:hover, a:focus {
    top:-4px;
    left:-4px;
    box-shadow:1px 1px 0px 0px rgba(0,0,0,0.2),//Change here
        2px 2px 0px 0px rgba(0,0,0,0.2),//Change here
        3px 3px 0px 0px rgba(0,0,0,0.2),//Change here
        4px 4px 0px 0px rgba(0,0,0,0.2);//Change here
}

“��角线”看起来比你的示例图像要轻，因为你在这里应用了0.2的不透明度，你可以更改它。 点击此处查看演示
问题在于对角线部分是灰色的，因为它们是在白色上添加透明黑色，而不是在下面的li上添加。 - Kelderic
@AndyM，我相信你可以在RGBA颜色中进行更改？ - Godinall
我的目标是只声明每种颜色一次。我可以通过使用深色不透明度来避免侧面和底部的较暗颜色。但我需要颜色和阴影，而这种方法无法为三角形提供颜色。然而，它确实可以产生阴影，其他方法则不能。也许我可以将它们结合起来？无论如何，感谢您的帮助！ - Kelderic
1
1
这最终会产生一堆曲线，这并不是我想要的。不过，对于这个完全不同且有趣的想法，我给一个加1。谢谢！ - Kelderic
不需要道歉，这是一个有趣的想法，它涉及到更简单的代码。 - Kelderic
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接