CSS样式库：特殊节日，网站变成灰色

抗击疫情仍未结束，将一切打理好，如果仍要小心翼翼的等到明年，我们必须等得起。

1. 实现

原理：CSS的Filter（滤镜）属性，再加上各浏览器的兼容性代码，就完成了。

这里直接贴上代码：

body{
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

第7行代码是在IE下生效，已测试版本：IE7、IE8、IE9。

 预览效果：

 2. 拓展

菜鸟教程：CSS的Filter属性（滤镜）

（1）添加阴影效果，即多个滤镜的写法，这里直接贴上代码：

body{
    -webkit-filter: grayscale(100%) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    -moz-filter: grayscale(100%) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    -ms-filter: grayscale(100%) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    -o-filter: grayscale(100%) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    filter: grayscale(100%) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

（预览截图，就是上面那俩）

（2）Js实现特殊日期判断，这里直接贴上代码：

var isGrayDay = () = >{
  const grayDay = ["0404", "0405", "0406"];
  let date = new Date();
  let [m, d] = [date.getMonth() + 1, date.getDate()];
  m = m < 10 ? "0" + m: m;
  d = d < 10 ? "0" + d: d;
  let today = m + d;
  let index = sd.findIndex((item) = >{
    return item == today;
  });
  return index != -1 ? true: false;
};

点个赞上推荐，生活乐无边！