网页变灰色前端是如何实现的？

最新推荐文章于 2022-12-26 15:15:21 发布

admin_--

最新推荐文章于 2022-12-26 15:15:21 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： html css

本文链接：https://blog.csdn.net/liuyalin_/article/details/108491042

本文介绍了一种在特定日子如疫情哀悼日，利用CSS3滤镜效果使网站界面变为黑白灰色调的技术。通过两种方法实现：一是使用JS结合jQuery设定指定时间自动变灰及复原；二是直接使用CSS处理，但无法设置时间。适用于前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文转载转自bilibili最爱up主–黑马程序员pink老师

今天是4.4疫情哀悼日，纪念疫情期间牺牲的烈士和逝世同胞，因此大部分网站颜色都变灰色
了,我们前端是如何实现的呢?
核心原理，使用css3的滤镜效果即可。filter grayscale将整个界面变为黑白灰色调，是CSS3新功能。
方式1:通过js可以设定指定时间，自动变灰以及复原
注意:以下代码需要引入jquery

<script>
// 1.得到当前的时间
var nowTime = new Date0.getTime0;
// 2.设置结束的时间是2020年4月5号凌晨
var overTime = new Date("2020/04/05 00:00:00).getTime0;
// 3.如果当前时间小于了结束时间，简单说就是当前时间还没到4.5号零点
if (nowTime < overTime) {
// 4.把html设置灰色滤镜
$("html")css({
'-webkit- filter': 'grayscale(100%)',
'-moz-filter': 'grayscale(100%)',
'-ms-filter: 'grayscale(100%)',
'o-filter': 'grayscale(100%)',
// ie滤镜
fiter: 'progid:DXlmageTransform.Microsoft.Basiclmage(grayscale= 1)',
// ie6等低版本浏览器不需要加滤镜
' filter': 'none' });
</script>

方式2:直接使用CSS处理，但是不能设置时间


```css
<style>
html {
/*滤镜效果*/
filter: grayscale(100%);
/* webkit内核*/
-webkit-filter: grayscale(100%);
/*火狐内核*/
-moz-filter: grayscale(100%);
/*微软内核*/
-ms-filter: grayscale(100%);
/*欧朋内核*/
-o-filter: grayscale(100%);
/* ie专有滤镜*/
filter: progid:DXlmage Transform.Microsoft.Basiclmage(grayscale= 1); 
</style>