网站灰度css代码,设定时间自动灰度,可用于重大事件哀悼

阅读644评论0

自从9-18后,不少网友看到了博主的网站在9-18当天变成了灰色的,并且有文字提示哀悼918,之后有不少网友想要这种功能,因为我这个是rpcms系统的,插件形式不一定兼容网友系统,这里就统一发一下原生态的吧。

2020-11-29_232718.jpg

网页灰度渲染其实很简单,就是一行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:若需协助整合到自己的系统上,可以联系博主哈,记得给点辛苦费就行了。