模板:文字模糊

来自维阿百科
霓虹灯鱼讨论 | 贡献2022年7月16日 (六) 12:59的版本 (创建页面,内容为“<includeonly>{{#ifeq:{{{hover}}}|true|{{hovers}}<span class="hovers-blur" style="color:{{{sdcolor|black}}}; transition-duration:{{{time|0.75}}}s; vertical-align:init…”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转至: 导航搜索
Template-info.png 模板文档  [查看] [编辑] [历史] [刷新]

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

(i)兼容性问题 现已知在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)");
		});
	});
}