模板:文字模糊/doc
< 模板:文字模糊
借由 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)"); }); }); }
|