如何将所有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;

Demo

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

.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>