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

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

box-shadow: <x-offset> <y-offset> <spread> <blur> <color>;

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

HTML部分

<div class="box"></div>

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);
}

运行结果

运行结果

原文章:https://www.sitepoint.com/css-box-shadow-animation-performance/

返回列表