如何将所有CSS框阴影移回div下

Question

所以我在div上有一个3D-Paper效果，这是用多个box-shadow属性创建的。 我不知道该怎么做是为了给它们制作动画，所以当我将它们悬停在div上时，它们都会滑回来。 考虑CSS动画或jQuery / javascript。 任何都没关系。 HTML：

<div class = "project">
      <p>Our very own JS library
        <br />
        <br />
        Still working on it
        <br />
        <span class = "platforms">
                    <i class = "fa fa-cogs fa-3x" id = "swing"></i>
                </span>
      </p>
</div>

CSS

.project {
    background-color: rgb(230, 230, 230);
    min-height: 300px;
    color: #007fff;
    padding: 1%;
    box-shadow: 4px 4px #fff, 5px 5px #ccc, 9px 9px #fff, 10px 10px #ccc, 14px 14px #fff;
}

结果：

Answer 1

您可以使用transition css属性执行此操作。 像这样：

 transition: box-shadow 1s;

然后是你想要的盒子阴影:hover 。 也许是这样的：

box-shadow: 0 0 #fff, 0 0 #ccc, 0 0 #fff, 0 0 #ccc, 0 0 #fff;

演示

如果需要，您还可以使用transition-timing-function来调整动画类型。 更多信息在这里 。

 .project { background-color: rgb(230, 230, 230); min-height: 300px; color: #007fff; padding: 1%; transition: box-shadow 1s; box-shadow: 4px 4px #fff, 5px 5px #ccc, 9px 9px #fff, 10px 10px #ccc, 14px 14px #fff; } .project:hover { box-shadow: 0 0 #fff, 0 0 #ccc, 0 0 #fff, 0 0 #ccc, 0 0 #fff; } 

 <div class = "project"> <p>Our very own JS library <br /> <br /> Still working on it <br /> <span class = "platforms"> <i class = "fa fa-cogs fa-3x" id = "swing"></i> </span> </p> </div>