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

这个方式有个问题就是需要单独设置一个