在2006年我开始网上留下印记的时候,写了一个 dHTML 特效模拟XP关机对话框变灰, 那个时候大行其道的还是IE6,用的还是微软特有的 filter:progid:DXImageTransform.Microsoft.Fade
叠加两个
实现。
今天(2022-11-30)恰好长者去逝,学习一下最新的css姿势再实现一次。本来想用 CSS Animation+Filter实现,还是比较麻烦。比如我参考的例子是模仿 Red Dead Redemption 2 照片效果css
#invert{
filter: invert(1.0) grayscale(1.0);
}
#photo{
animation: blur 5s infinite alternate;
}
@keyframes blur{
from{
filter: blur(3px);
opacity: 0;
}
to{
filter: blur(0px);
opacity: 1;
}
}
这个方式有个问题就是需要单独设置一个 元素。后来经过 @yuanchuan23 的指点发现可以通过 Web Animation 更简单的实现:
document.body.animate([
{filter: 'brightness(none) grayscale(0%)'},
{filter: 'brightness(10) grayscale(10%)', offset: 0.2},
{filter: 'brightness(1) grayscale(100%)'}
], {duration: 2000, fill: 'forwards'})
这样写比 css 方便多了。加一个类似照相机闪光灯过曝的效果。其中 fill: 'forwards'
可以让变灰之后停下来。
放一个 demo 在这里:https://lab.est.im/grayscale_animation 点一下可以再变一次