/* 为div元素创建简单的CSS样式，为它添加一个阴影效果 */

.box {

position: relative;

display: inline-block;

width: 100px;

height: 100px;

border-radius: 5px;

background-color: #fff;

box-shadow: 0 1px 2px rgba(0,0,0,0.15);

transition: all 0.3s ease-in-out;

}

/* 插件伪元素并隐藏它 */

/* 注意box-shadow属性的设置 */

.box::after {

content: '';

position: absolute;

z-index: -1;

width: 100%;

height: 100%;

opacity: 0;

border-radius: 5px;

box-shadow: 0 5px 15px rgba(0,0,0,0.3);

transition: opacity 0.3s ease-in-out;

}

由于我们需要同时动画div元素和它的伪元素的opacity属性，所以为这两个元素都添加了transition动画过渡效果。

通过上面的设置，我们得到了一个带阴影效果的矩形，它的大阴影开始时是隐藏的，得到的结果类似下面的样子：

接下来我们开始制作鼠标滑过时的阴影动画效果。在鼠标滑过div元素时将它放大，然后将它的伪元素的透明度从0过渡到1。

/* 放大div元素 */

.box:hover {

transform: scale(1.2, 1.2);

}

/* 将伪元素的透明度从0修改为1 */

.box:hover::after {

opacity: 1;

}

到此我们就得到了鼠标滑过时的阴影动画效果。用鼠标滑过下面的div看看效果。

下面是完整的使用伪元素实现元素阴影动画效果的CSS样式代码，包括各个浏览器厂商的前缀。

.box {

position: relative;

display: inline-block;

width: 100px;

height: 100px;

background-color: #fff;

border-radius: 5px;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

border-radius: 5px;

-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

}

.box::after {

content: "";

border-radius: 5px;

position: absolute;

z-index: -1;

top: 0;

left: 0;

width: 100%;

height: 100%;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

opacity: 0;

-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

}

.box:hover {

-webkit-transform: scale(1.25, 1.25);

transform: scale(1.25, 1.25);

}

.box:hover::after {

opacity: 1;

}

通过动画transform和opacity属性，我们可以得到更好的性能效果。所以，在你以后要制作类似的盒子阴影动画效果的时候，请不要直接动画box-shadow属性，而应该采用本文介绍的方法。