当全国哀悼日时，怎么让整个网站变成灰色呢？

有几种方法可以使整个网站在全国哀悼日期间变成灰色，以下列出一些前端开发常用的技术：

1. 使用CSS滤镜:

这是最简单和推荐的方法。您可以使用CSS filter: grayscale(100%); 将整个网站变为灰色。为了方便控制，最好将此样式添加到一个单独的CSS类中，例如 .grayscale，然后在需要的时候将此类添加到 <body> 元素上。

.grayscale {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* 兼容 Safari 和旧版浏览器 */
  -moz-filter: grayscale(100%); /* 兼容 Firefox */
  -ms-filter: grayscale(100%); /* 兼容 IE */
  -o-filter: grayscale(100%); /* 兼容 Opera */
}

然后，使用JavaScript根据日期动态添加或移除这个类：

const today = new Date();
const mourningDates = [
  //  将哀悼日的日期添加到这里，例如：
  new Date('2024-04-04'), //  示例日期，请替换为实际日期
  // ...更多日期
];

const isMourningDay = mourningDates.some(date => {
  return date.getFullYear() === today.getFullYear() &&
         date.getMonth() === today.getMonth() &&
         date.getDate() === today.getDate();
});

if (isMourningDay) {
  document.body.classList.add('grayscale');
}

2. 使用SVG滤镜:

这种方法更复杂，但可以实现更精细的控制，例如对特定元素应用不同的灰度级别。您可以创建一个SVG滤镜，然后在CSS中引用它。

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                      0.3333 0.3333 0.3333 0 0
                                      0.3333 0.3333 0.3333 0 0
                                      0      0      0      1 0" />
  </filter>
</svg>

.grayscale {
  filter: url(#grayscale);
}

JavaScript部分与方法1相同。

3. 使用覆盖层:

您可以创建一个覆盖整个页面的半透明灰色层。这种方法的优点是可以更容易地控制灰度级别和透明度。

<div id="grayscale-overlay" style="display: none;"></div>

#grayscale-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 调整透明度 */
  z-index: 9999; /* 确保覆盖层在最上方 */
  pointer-events: none; /*  允许点击穿过覆盖层 */
}

同样，使用JavaScript根据日期显示或隐藏覆盖层：

// ... (与方法1相同的日期判断逻辑)

if (isMourningDay) {
  document.getElementById('grayscale-overlay').style.display = 'block';
}

选择哪种方法？

对于简单的全站灰度效果，CSS filter: grayscale(100%); 是最简单和高效的。
如果需要更精细的控制或动画效果，SVG滤镜是更好的选择。
覆盖层方法适用于需要控制透明度或需要在灰色背景上显示其他内容的场景。

重要提示： 请确保在哀悼日结束后移除灰度效果。这可以通过在JavaScript中添加一个结束日期的判断，或者手动移除相关的CSS类或覆盖层来实现。并且，请尊重哀悼日的严肃性，避免使用过于花哨或不合适的动画效果。

posted @ 2024-11-29 03:05 王铁柱6 阅读(51) 评论(0) 编辑收藏举报