html5盒⼦阴影效果，如何制作平滑的“box-shadow”盒⼦阴影动
画效果
在我们制作box-shadow属性的动画的时候，每⼀帧动画都会引起浏览器的重绘操作，严重影响页⾯的性能。我们有什么办法可以解决动画box-shadow属性时页⾯的性能问题呢？答案是：没有！但是我们可以使⽤其它⽅法来模拟box-shadow动画：通过动画伪元素的opacity 属性来达到动画元素阴影的效果。通过这种⽅法只需要进⾏少量的重绘，就可以达到和动画box-shadow属性⼀样的效果。
使⽤box-shadow属性来制作元素的阴影动画效果。
动画box-shadow属性
使⽤⿏标滑过卡⽚看看效果
使⽤动画来改变box-shadow (在这个例⼦中从 box-shadow: 0 1px 2px rgba(0,0,0,0.15) 到 box-shadow: 0 5px 15px
rgba(0,0,0,0.3)的过程中会⼀起每⼀帧都进⾏重绘操作。
也许在你的桌⾯电脑浏览器中不会看出有什么问题，但是在移动⼿机上就有可能会出现问题。也许在更为复杂的布局中，你的桌⾯电脑浏览器也会出现问题。
使⽤伪元素来制作元素的阴影动画效果。
使⽤伪元素动画进⾏模拟
使⽤⿏标滑过卡⽚看看效果
我们可以通过插⼊⼀个:after来减少重绘的数量，同时为它添加⼀个阴影，然后在⿏标滑过时动画伪元素的opacity属性。
transform和opacity属性的修改都是被硬件加速的，所以我们可以达到更好的性能效果。
在执⾏上⾯的两个例⼦的时候，打开你的浏览器开发⼈员⼯具，你可以看到类似下⾯的结果：
从上图可以看到，直接使⽤box-shadow属性进⾏动画会进⾏更多的重绘操作。
opacity和transform属性是少数执⾏动画时不进⾏重绘操作的CSS属性之⼀。所以我们通过结合这两个属性可以达到性能优化的效果。
上⾯两种阴影动画效果的核⼼实现代码如下：
/* box-shadow动画 */
.make-it-slow {
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: box-shadow 0.3s ease-in-out:
}
/* 在⿏标滑过时过渡到⼀个较⼤的阴影 */
.make-it-slow:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
/* 伪元素阴影效果 */
.make-it-fast {
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* 重新渲染较⼤的阴影，同时将阴影隐藏 */
.make-it-fast::after {
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
opacity: 0;
transition: opacity 0.3s ease-in-out:
}
/
* 在⿏标滑过时显⽰较⼤的阴影 */
.make-it-fast:hover::after {
opacity: 1;
}
使⽤伪元素实现元素阴影动画效果
使⽤伪元素实现元素阴影动画效果的完整过程也⾮常简单。⾸先我们需要使⽤:after伪元素来制作元素⿏标滑过时的⼤阴影效果。例如我们需要为⼀个
元素制作阴影动画效果。
/* 为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;
width: 100%;
height: 100%;
box shadow怎么设置
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 {
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属性，⽽应该采⽤本⽂介绍的⽅法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。