抗击疫情仍未结束,将一切打理好,如果仍要小心翼翼的等到明年,我们必须等得起。
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. 拓展
(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;
};
点个赞上推荐,生活乐无边!