CSS:box-shadow盒子阴影+悬停位移效果

在 CSS 中，该box-shadow属性用于给网页元素添加阴影，并且这些阴影可以变成动画。但是，阴影动画会影响浏览器的性能，导致渲染页面时出现延迟。

box-shadow有四个值和一种颜色。这四个值分别是阴影的水平位置（x 偏移）、垂直位置（y 偏移）、展开和模糊半径。典型的阴影动画将涉及以下一个或多个值的更改

[css]
box-shadow: <x-offset> <y-offset> <spread> <blur> <color>;[/css]

以下我们创建一个简单的box-shadow动画，

HTML部分

[php]
<div class="box"></div>
[/php]

CSS部分

[css]

.box {
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25),
0px 10px 20px 0px rgba(0, 0, 0, 0.5);
transition: transform ease .5s, box-shadow ease .5s;
}
.box:hover { transform: translateY(-5px);
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25),
0px 20px 40px 0px rgba(0,0,0,0.15);
}
[/css]