给你的网站文字添加黑幕-隐藏文字

Mon, 17 Feb 2020 00:00:00 +0800

📝

此文章恢复自过去的博客站点，仅作纪念保留。
原文发布于 2020-02-17
原始地址：https://justmyblog.net/post/116.html
Web Archive：https://web.archive.org/web/20210509214415/https://justmyblog.net/post/116.html

在萌娘百科上无意闲逛看到了一些有趣的网页效果,比如网页弹幕和文字黑幕,便决定添加到自己的博客上来。

开始前请注意 本文基于知识共享署名-非商业性使用-相同方式共享 3.0 (CC BY-NC-SA 3.0) 许可协议发布源码引自萌娘百科,万物皆可萌的百科全书! 源码地址: 传送门转载请在开头保留本文链接以及源码链接,并遵循相关协议内容不可商用!

原理分析

文字背景和字体都设置为黑色，当鼠标选中时高亮 黑幕下的文字 然后再弄个自动高亮就ok了

直接放CSS源码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42



/*
 * 请尊重萌娘百科版权，以下代码除非注明均是管理员手敲出来的！！！复制需要注明源自萌娘百科，并且附上URL地址http://zh.moegirl.org/MediaWiki:Common.css
 * 版权协定：知识共享 署名-非商业性使用-相同方式共享 3.0
 * 复制之后请把图片换成自己网站上URL地址！
 */
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited {
 color: #252525;
}
.heimu,
.heimu a,
a .heimu,
.heimu a.new {
 background-color: #252525;
 color: #252525;
 text-shadow: none;
}
body:not(.heimu_toggle_on) .heimu:hover,
body:not(.heimu_toggle_on) .heimu:active,
body:not(.heimu_toggle_on) .heimu.off {
 transition: color .13s linear;
 color: white;
}
body:not(.heimu_toggle_on) .heimu:hover a,
body:not(.heimu_toggle_on) a:hover .heimu,
body:not(.heimu_toggle_on) .heimu.off a,
body:not(.heimu_toggle_on) a:hover .heimu.off {
 transition: color .13s linear;
 color: lightblue;
}
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off,
body:not(.heimu_toggle_on) .heimu.off .new,
body:not(.heimu_toggle_on) .heimu.off .new:hover,
body:not(.heimu_toggle_on) .new:hover .heimu.off {
 transition: color .13s linear;
 color: #BA0000;
}

膜拜大佬的源码

📝 Note

把上面的内容添加到网站CSS即可

基本食用方法

方法很简单 黑幕内容 举个栗子 嘿嘿嘿 效果:||嘿嘿嘿|| 此CSS支持评论区使用(采用Markdown评论的主题不支持,因为不支持html)

高级食用方法

基本食用方法够用了所以其它高级用法请参见萌娘百科黑幕相关内容萌娘百科:黑幕模板萌娘百科:模板讨论:黑幕欢迎在评论区分享更高级的食用方法

📝 Note

欢迎在本文章评论区测试效果!

CSS on Shiro

给你的网站文字添加黑幕-隐藏文字

原理分析

直接放CSS源码

基本食用方法

高级食用方法