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

點個贊上推薦，生活樂無邊！