Powerful filters in CSS

On April 4, 2020, at 10 o ‘clock, the whole nation observed a three-minute silence, and all entertainment activities were banned. All major entertainment platforms mourned in gray. While mourning, learn about the power of CSS3 filter filter

The CSS syntax

CCS filter reference syntax

STYLE="filter:filtername(fparameter1, fparameter2...) "    (Filtername is the name of the filter, fparameter1, fparameter2 is filter HTMLElement. Filters. Filtername. FParameter = value;Copy the code

The script syntax:

HTMLElement.filters.filterName.fParameter=value;

Copy the code
filter describe
blur(px) The fuzzy
opacity(%) transparency
brightness(%) brightness
drop-shadow(h-shadow v-shadow blur spread color) shadow
grayscale(%) The cell
hue-rotate(deg) Hue rotation
invert(%) The color
opacity(%) The cell
saturate(%) saturation
sepia(%) brown
contrast(%) contrast
url() The URL function takes an XML file that sets an SVG filter and can contain an anchor to specify a specific filter element,eg:filter: URL (SVG-url # elemental-id)

Take a look at the CSS of hupu grayscale image

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%)';
}
Copy the code