网站灰度css代码，设定时间自动灰度，可用于重大事件哀悼
自从9-18后，不少网友看到了博主的网站在9-18当天变成了灰色的，并且有文字提示哀悼918，之后有不少网友想要这种功能，因为我这个是rpcms系统的，插件形式不一定兼容网友系统，这里就统一发一下原生态的吧。
网页灰度渲染其实很简单，就是一行css的事。如下：
-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);filter: gray;
只需要再写一个日期控制方法就可以了。比如下方DEMO：
$grayDate=array(
array('09-18','九一八事变，勿忘国耻'),
array('12-13','南京大屠杀'),
);
$htmlClass='';
foreach($grayDate as $k=>$v){
if(date("m-d") == $v[0]){
$htmlClass='style="-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);filter: gray;"';
break;
}
}在body标签中写上变量
<body <?php echo $htmlClass;?>>
这样就完成了日期控制，只需要把日期设置好就不用管了，到指定日期网站会自动灰度显示。
附本站灰度的代码，文字的css不一定适合您的网站，记得修改修改。
$grayDate=array(
array('09-18','九一八事变，勿忘国耻'),
array('12-13','南京大屠杀'),
);
$htmlClass=$htmlAfter='';
foreach($grayDate as $k=>$v){
if(date("m-d") == $v[0]){
$htmlClass='style="-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);filter: gray;"';
$htmlAfter='<style>
body:after {
content: "今天是'.date('n.d').'\A祭'.$v[1].'";
position: absolute;
top: 18rem;
left: 8rem;
font-size: 3rem;
color: #a9a9a9;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
writing-mode: tb-rl;
white-space: pre;
}
@media screen and (max-width: 1400px){
body:after {
left: 0.5rem;
font-size: 2rem;
}
}
</style>';
break;
}
}PS：若需协助整合到自己的系统上，可以联系博主哈，记得给点辛苦费就行了。
有 0 位网友评论：