css中的强大滤镜
2020年4月4号10点 全国默哀3分钟，全民禁止一切娱乐活动，各大娱乐平台灰度致哀，哀痛之余学习一下css3滤镜filter的强大之处
css语法
CCS滤镜参考语法
STYLE="filter:filtername(fparameter1, fparameter2...)"
  （Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的HTMLElement.filters.filterName.fParameter=value;
script 语法：
HTMLElement.filters.filterName.fParameter=value;
| filter | 描述 |
|---|---|
| blur(px) | 模糊 |
| opacity(%) | 透明度 |
| brightness(%) | 亮度 |
| drop-shadow(h-shadow v-shadow blur spread color) | 阴影 |
| grayscale(%) | 单元格 |
| hue-rotate(deg) | 色相旋转 |
| invert(%) | 反色 |
| opacity(%) | 单元格 |
| saturate(%) | 饱和度 |
| sepia(%) | 褐色 |
| contrast(%) | 对比度 |
| url() | URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素,eg:filter: url(svg-url#element-id) |
看下虎扑灰度图像的CSS
var beginDate = new Date(2020, 3, 4, 0);
var endDate = new Date(2020, 3, 5, 9);
var today = new Date();
if (today >= beginDate && today <= endDate) {
var root = document.documentElement;
root.style.filter = 'grayscale(100%)';
root.style.webkitFilter = 'grayscale(100%)';
root.style.MozFilter = 'grayscale(100%)';
root.style.OFilter = 'grayscale(100%)';
root.style.msFilter = 'grayscale(100%)';
}
