模板:文字模糊

模板文档  

这个文档嵌入自模板:文字模糊/doc。

借由 CSS3 text-shadow 属性实现的模糊效果。与 {{模糊}}、{{黑雾}} 等模板等价。

(ｉ)兼容性问题 现已知在iOS、iPadOS和MacOS的Safari上无法刮开模糊，但是指针悬停模式正常，如需解决可查看#Apple刮开模糊临时措施。

参数

除数字参数 1 以外均为可选参数。

• 数字参数 1：要模糊的文字内容。
• 数字参数 2：指针悬停在文字上时显示的内容（对移动设备不友好）。默认为 你知道的太多了。
• 参数 sdcolor：模糊文字所使用的颜色。默认为 grey。
• 参数 sdsize：模糊的距离，数值越大越模糊。默认为 10px。
• 参数 css：自定义其他 CSS 样式。
• 参数 hover：为true时，开启hover模式，鼠标放置于文字之上时可以渐变解除模糊，撤下时恢复模糊。hover模式中sdsize参数无效。
• 数字参数 time：当hover为true时，设置渐变动画的时长。单位秒，默认为0.75秒。

用法示例

• 指针悬停模式。因前述兼容性问题，建议优先考虑加入hover=true参数。

{{文字模糊|如果你摘下眼镜后就是这种效果，那么恭喜你：你已经自带5像素的高斯模糊了|hover=true}} 如果你摘下眼镜后就是这种效果，那么恭喜你：你已经自带5像素的高斯模糊了

• 常规用法。

{{文字模糊|犯人就是他↗|假的，哎哟我眼睛业障重啊}} 犯人就是他↗

• 指定文字颜色与模糊程度。

{{文字模糊|新版刮刮乐|sdcolor=#7BCC83|sdsize=3px}} 新版刮刮乐

• 现暂无法在模板中直接加入链接（萌百娘）。请配合 {{coloredlink}} 使用。（蓝链为 #0645AD，红链为 #BA0000）

{{文字模糊|{{coloredlink|rgba(0,0,0,0)|萌百娘}}|sdcolor=#0645AD}} 萌百娘

Apple刮开模糊临时措施

如需要，可选择在您的个人JS中添加：

if ( /Macintosh|iPhone|iPad/.test(navigator.userAgent) ) {
	mw.loader.addStyleTag('.wenzimohu, .wenzimohu * { transition-duration: 0.75s; }');
	mw.hook('wikipage.content').add(function ($content) {
		$content.find(".wenzimohu , .wenzimohu *").filter(function () {
			return $(this).css("color") == "rgba(0, 0, 0, 0)";
		}).hover(function () {
			$(this).css( "color", ($(this).css("text-shadow").match(/rgb\(.*?\)/) || ["inherit"])[0]);
		}, function () {
			$(this).css("color", "rgba(0, 0, 0, 0)");
		});
	});
}