Question

所以我试图创建一个div元素，当它悬停时，会弹出＆＃34; pop＆＃34; out，并显示为2.5D框。基本上，这个人在寻找什么：

除了带有过渡的动画，所以当没有徘徊时，它是一个简单的2D盒子，当它盘旋时，它看起来就像那个人的第二个图像。

到目前为止，这里有一个小提琴：

<div class="cat-box bot-row">
    <h4>Hello World!</h4>
    <p>Info</p>
</div>

。

.bot-row:hover {
    transition: all 0.3s ease-in-out;
    transform: translate(10px,10px);
}

.cat-box {
    background-color: grey;
    outline: #DDD8D4 solid 3px;
    padding: 3px 5px 5px 5px;
    margin: 10px 30px 10px 30px;
    transition: all 0.3s ease-in-out;
}

Answer 1

通过使用多个框阴影声明，您实际上可以通过与链接的答案非常相似的方式执行此操作。

我还冒昧地将您的outline转换为border并设置box-sizing: border-box，以便边框不会影响效果。

这是一个现场演示：

.bot-row:hover {
    transition: all 0.3s ease-in-out;
    transform: translate(10px, 10px);
    box-shadow: -1px -1px 0px #999, -2px -2px 0px #999, -3px -3px 0px #999, -4px -4px 0px #999, -5px -5px 0px #999, -6px -6px 0px #999, -7px -7px 0px #999, -8px -8px 0px #999, -9px -9px 0px #999, -10px -10px 0px #999, -11px -11px 0px #999, -12px -12px 0px #999;
}
.cat-box {
    box-sizing: border-box;
    background-color: grey;
    border: #DDD8D4 solid 3px;
    padding: 3px 5px 5px 5px;
    margin: 10px 30px 10px 30px;
    transition: all 0.3s ease-in-out;
}

<div class="cat-box bot-row">
     <h4>Hello World!</h4>

    <p>Info</p>
</div>

JSFiddle版本：http://jsfiddle.net/78m3nzv6/3/

CSS Box 2.5D Pop Out Shadow效果

1 个答案: