2020.4.4号全国疫情哀悼日网页变灰色前端是如何实现的?-pink老师

2019/04/10 10:10
阅读数 43

今天是4.4疫情哀悼日,纪念疫情期间牺牲的烈士和逝世同胞,因此大部分网站颜色都变灰色了,我们前端是如何实现的呢?

核心原理,使用css3的滤镜效果即可,filter grayscale 将整个界面变为黑白灰色调, 是CSS3新功能

方式1:  通过js可以设定指定时间,自动变灰以及复原


 

注意:以下代码需要引入jquery

<script>
    // 1.得到当前的时间
    var nowTime = new Date().getTime();
    // 2.设置结束的时间 是 2020年4月5号凌晨
    var overTime = new Date('2020/04/05 00:00:00').getTime();
    // 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%)',
        'filter': 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)',
        '_filter': 'none'
      });
    }
  </script>

 

没有添加代码前:

添加代码后:

 

 


 

方式2:  直接使用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:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }
  </style>

这里深切哀悼抗击新冠肺炎疫情牺牲烈士和逝世同胞, 加油武汉,加油中国。

 

原文出处:https://www.cnblogs.com/xiaoqiang001/p/12636426.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部