本文从《How to animate “box-shadow” with silky smooth performance》编译而来，英文没问题的同学，看原文找原味。
案例效果如下图所示，具体效果请移步demo。
为提高动画性能，应该减少页面的repaint次数。因此相对于直接动画“box-shadow”属性来说，使用伪对象的方式预先定义好阴影，然后动画opacity实现的方式性能更好。
/* 慢速方式 */ .make-it-slow { box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: box-shadow 0.3s ease-in-out: } { box-shadow: 0 5px 15px rgba(0,0,0,0.3); { box-shadow: 0 1px 2px rgba(0,0,0,0.15); { box-shadow: 0 5px 15px rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.3s ease-in-out: } { opacity: 1; }完整案例效果如下所示。
.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); { content: ""; border-radius: 5px; position: absolute; 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) } { opacity: 1 }That’s all.
声明
本文首发于极客头条。爱前端，乐分享。FedFun希望与您共同进步。
欢迎任何形式的转载，烦请注明装载，保留本段文字。
独立博客
新浪微博
极客头条
顶 9 踩 0
我的同类文章
猜你在找
查看评论
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
2015年度博客之星评选
感谢您投票，求专家好评！
个人资料
whqet
相关文章
精彩导读
热门资讯
关注我们
